CSS文字(Text)屬性-----letter-spacing和text-align
阿新 • • 發佈:2018-12-26
letter-spacing
letter-spacing:normal | <length> 指定字元之間的額外間隙
- normal:預設間隔。計算值為
0
- <length>:用長度值指定字元間隔。可以為負值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <styletype="text/css"> .test p { /*邊框*/ border: 1px solid #000; } .normal p { letter-spacing: normal; color: #FF0000; } .length p { letter-spacing: 10px; color: #0000FF; } </style> </head> <body> <ul class="test"> <li class="normal"> <strong>預設間隔</strong> <p>預設情況下的文字間間隔</p> </li><li class="length"> <strong>自定義的間隔大小</strong> <p>自定義的文字間隔大小Hello world</p> </li> </ul> </body> </html>
text-align
text-align:start|end| left | right | center |justify|match-parent|justify-all 定義元素內容的水平對齊方式
- left:內容左對齊
- center:內容居中對齊
- right:內容右對齊
- justify:內容兩端對齊,但對於強制打斷的行(被打斷的這一行)及最後一行(包括僅有一行文字的情況,因為它既是第一行也是最後一行)不做處理
- start:內容對齊開始邊界
- end:內容對齊結束邊界
- match-parent:這個值和
inherit
表現一致,只是該值繼承的start
或end
關鍵字是針對父母的direction值並計算的,計算值可以是 left 和 right - justify-all:效果等同於
justify
,不同的是最後一行也會兩端對齊
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .test p { border: 1px solid #000; } .left p { text-align: left; } .center p { text-align: center; } .right p { text-align: right; } .justify p { width: 200px; text-align: justify; } .start p { text-align: start; } .end p { text-align: end; } </style> </head> <body> <ul class="test"> <li class="left"> <strong>left</strong> <p>我是左對齊內容</p> </li> <li class="center"> <strong>center</strong> <p>我是居中對齊內容</p> </li> <li class="right"> <strong>right</strong> <p>我是右對齊內容</p> </li> <li class="justify"> <strong>justify</strong> <p>我 是一段可以兩端對齊的文字, 你 仔細看看, 我 的對齊方式都貼著 容器左右的邊緣。</p> </li> <li class="start"> <strong>start</strong> <p>start效果</p> </li> <li class="end"> <strong>end</strong> <p>end效果</p> </li> </ul> </body> </html>