CSS设置文本——字母、单词、段落

<1>字母大小写

 1 <html>
2 <head>
3 <style type="text/css">
4 h1 {text-transform: uppercase}
5 p.uppercase {text-transform: uppercase}
6 p.lowercase {text-transform: lowercase}
7 p.capitalize {text-transform: capitalize}
8 </style>
9 </head>
10
11 <body>
12 <h1>This Is An H1 Element</h1>
13 <p class="uppercase">This is some text .</p>
14 <p class="lowercase">This is some text .</p>
15 <p class="capitalize">This is some text .</p>
16 </body>
17 </html>

capitalize这个词的意思就是“把……的首字母大写”。

当你看了这个效果之后就一切都明白了。

<2>单词间距

 1 <html>
2 <head>
3 <style type="text/css">
4 p.spread {word-spacing: 30px}
5 p.tight {word-spacing: -0.5em}
6 </style>
7 </head>
8
9 <body>
10 <p class="spread">This is some text.</p>
11 <p class="tight">This is some text.</p>
12 </body>
13 </html>

这个用法可以将外观设置的更加好看。

更加美观。 

<3>段落不换行

 1 <html>
2 <head>
3 <style type="text/css">
4 p {white-space: nowrap}
5 </style>
6 </head>
7
8 <body>
9 <p>
10 这是一些文本。
11 这是一些文本。
12 这是一些文本。
13 这是一些文本。
14 这是一些文本。
15 这是一些文本。
16 这是一些文本。
17 这是一些文本。
18 这是一些文本。
19 这是一些文本。
20 这是一些文本。
21 这是一些文本。
22 </p>
23 </body>
24 </html>

就目前来看,这个技术好像没有什么用处。