有時候網站中的文字比較多,雖然為父元素設置了寬度,但是總是會出現兩端參差不齊的情況,看起來不整齊。其實實現段落的兩端對齊,只需要設置兩個css
樣式即可。
.demo{ text-align: justify; text-justify: inter-ideograph;/*IE*/ }
text-justify基本語法
語法:text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph
參數:
auto :允許瀏覽器用戶代理確定使用的兩端對齊法則 ;
inter-word :通過增加字之間的空格對齊文本,該行為是對齊所有文本行最快的方法,它的兩端對齊行為對段落的最后一行無效 ;
newspaper : 通過增加或減少字或字母之間的空格對齊文本,是用於拉丁文字母表兩端對齊的最精確格式 ;
distribute :處理空格很像newspaper,適用於東亞文檔,尤其是泰國 ;
distribute-all-lines :兩端對齊行的方式與distribute相同,也同樣不包含兩段對齊段落的最后一行,適用於表意字文檔 ;
inter-ideograph : 為表意字文本提供完全兩端對齊。他增加或減少表意字和詞間的空格 。
參數:
auto :允許瀏覽器用戶代理確定使用的兩端對齊法則 ;
inter-word :通過增加字之間的空格對齊文本,該行為是對齊所有文本行最快的方法,它的兩端對齊行為對段落的最后一行無效 ;
newspaper : 通過增加或減少字或字母之間的空格對齊文本,是用於拉丁文字母表兩端對齊的最精確格式 ;
distribute :處理空格很像newspaper,適用於東亞文檔,尤其是泰國 ;
distribute-all-lines :兩端對齊行的方式與distribute相同,也同樣不包含兩段對齊段落的最后一行,適用於表意字文檔 ;
inter-ideograph : 為表意字文本提供完全兩端對齊。他增加或減少表意字和詞間的空格 。
代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css實現段落文字兩端對齊</title> <style> *{margin:0;padding:0;} .demo{ width: 300px; height: 200px; margin: 20px auto; font-size: 14px; color: #0a78fa; text-align:justify; text-justify:inter-ideograph;/*IE*/ border: 1px solid #fa5275; } </style> </head> <body> <p class="demo"> 川劇流行於四川全境和雲南貴州等省部分地區,是融匯高腔、昆曲、胡琴(即皮黃)、彈戲(即梆子)和四川民間燈戲五種聲腔藝術而成的劇種。 川劇,是中國漢族戲曲劇種之一,流行於四川東中部、重慶及貴州、雲南部分地區。川劇臉譜,是川劇表演藝術中重要的組成部分, 是歷代川劇藝人共同創造並傳承下來的藝術瑰寶。川劇由昆曲、高腔、胡琴、彈戲、燈調五種聲腔組成。 </p> </body> </html>
效果如下: