CSS常用樣式之段落樣式（行高、段落縮進、段落對齊、文字間距、文字溢出、段落換行） ...
CSS常用樣式
4.段落樣式
1）行高
控制段落內每行高度
line-height : normal | length
例子 源代碼：
/* CSS代碼 */ .normal{ line-height:normal; } .length{ line-height:30px; }
<!-- HTML代碼 --> <body> <p class="normal">這是正常的行高<br>這是正常的行高<br>這是正常的行高</p> <p class="length">這是30px的行高<br>這是30px的行高<br>這是30px的行高</p> </body>
效果：
這是正常的行高
這是正常的行高
這是正常的行高
這是30px的行高
這是30px的行高
這是30px的行高
如果在一個元素中有一行文字，而行高等於元素的高度，那麼這一行文字就會垂直居中。
*註意是一行文字，而且先要把瀏覽器原有的內外邊距幹掉。
例子 源代碼：
/* CSS代碼 */ *{ margin:0; padding:0; } .box{ width:100px; height:100px; line-height:100px; border:1px solid #000; }
<!-- HTML代碼 --> <body> <div class="box"> <p>這是一行文字</p> </div> </body>
效果：
2）段落縮進
控制段落的首行縮進
text-indent : length
例子 源代碼：
/* CSS代碼 */ .indent{ text-indent:2em; }
<!-- HTML代碼 --> <body> <p class="normal">這裡沒有首行縮進</p> <p class="indent">這裡首行縮進了2em</p> </body>
效果：
這裡沒有首行縮進
這裡首行縮進了2em
3）段落對齊
控制段落對齊方式，不但是文本，對象中的其它inline或inline-block元素也能夠被text-align進行對齊方式的設置。
text-align : left | right | center | justify
例子 源代碼：
/* CSS代碼 */ .box2{ width:300px; border:1px solid #000; } .left{ text-align:left; } .center{ text-align:center; } .right{ text-align:right; }
<!-- HTML代碼 --> <body> <div class="box2"> <p class="left">左對齊文本</p> <p class="center">居中對齊文本</p> <p class="right">右對齊文本</p> </div> </body>
效果：
左對齊文本
居中對齊文本
右對齊文本
4）文字間距
控制段落的文字間的距離
letter-spacing : normal | length
例子 源代碼：
/* CSS代碼 */ .normal{ letter-spacing:normal; } .length{ letter-spacing:10px; }
<!-- HTML代碼 --> <body> <p class="normal">這是預設的文字間距</p> <p class="length">這是10px的文字間距</p> </body>
效果：
這是預設的文字間距
這是10px的文字間距
5）文字溢出
控制文本內容溢出部分的樣式
text-overflow : clip | ellipsis
clip : 當內聯內容溢出塊容器時，將溢出部分裁切掉。
ellipsis : 當內聯內容溢出塊容器時，將溢出部分替換為（...）。
因為text-overflow只是用來說明文字溢出時用什麼方式顯示，所以還需要定義強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden），這樣才能實現溢出文本被裁切或是顯示省略號的效果。
例子 源代碼：
/* CSS代碼 */ .clip,.ellipsis{ width:150px; border:1px solid #000; white-space:nowrap; overflow:hidden; } .clip{ text-overflow:clip; } .ellipsis{ text-overflow:ellipsis; } .clip:hover,.ellipsis:hover{ text-overflow:inherit; overflow:visible; }
<!-- HTML代碼 --> <body> <p>當你把游標移動到一下文本上，就能看到全部文本。</p> <div class="clip">這裡使用的是"text-overflow:clip"</div> <div class="ellipsis">這裡使用的是"text-overflow:ellipsis"</div> </body>
效果：
當你把游標移動到一下文本上，就能看到全部文本。
這裡使用的是"text-overflow:clip"這裡使用的是"text-overflow:ellipsis"
6）段落換行
控制內容超過容器的邊界時是否換行 （一般用於英文和URL地址）
word-wrap : normal | break-word
normal : 允許內容頂開或溢出指定的容器邊界。瀏覽器預設處理
break-word : 內容將在邊界內換行。如果需要，單詞內部允許換行。
例子 源代碼：
/* CSS代碼 */ .break{ width:300px; border:1px solid #000; word-wrap:break-word; }
<!-- HTML代碼 --> <body> <div class="break">我的博客：http://www.cnblogs.com/mossbaoo/</div> </body>
效果：（URL地址會另外換行）
我的博客：http://www.cnblogs.com/mossbaoo/
