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>