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>