text-align:justify的使用
阿新 • • 發佈：2019-02-08
.com ctype 屬性 flow com overflow 100% 方式 har
text-align 屬性是規定元素中的文本的水平對齊方式，設置塊級元素內文本的水平對齊方式。
在平常的開發過程中，對於text-align一般用到的是left,center,right。justify很少用到，它實現兩端對齊文本效果，文本行的左右兩端都放在父元素的內邊界上。
轉自博文：https://www.cnblogs.com/jyybeam/p/6074619.html
效果初體驗
首先有個比較簡單的例子。
html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .demo{ width: 70px; /*text-align: justify;*/ } </style> </head> <body> <div class = ‘demo‘> <p>飛灑發fd達fasdf省sdf份發f送fdfd大df夫df薩</p> </div> </body> </html>
不使用justify的結果：
使用justify，可以看出每一段都對齊了：
在表單中的應用
當text-align:justify使用在單行中，是起不到justify的作用的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>span{ width: 70px; text-align: justify; } input{ width: 100px; } </style> </head> <body> <div class="demo"> <span>昵稱：</span><input type="text" style = ‘width: 100px‘><br><br> <span>電子郵箱：</span><input type="email" style = ‘width: 100px;‘> </div> </body> </html>
既然單行不行，那麽就用多行。但是怎麽用單行呢？——用after
需要將span設置為float: left，:after為inline-block
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span{ width: 100px; text-align: justify; float: left; } span:after{ content:‘.‘; width: 100%; display: inline-block; overflow: hidden; height: 0; } input{ width: 100px; } </style> </head> <body> <div class="demo"> <span>昵稱</span>：<input type="text" style = ‘width: 100px‘><br><br> <span>電子郵箱</span>：<input type="email" style = ‘width: 100px;‘> </div> </body> </html>
結果為：
text-align:justify的使用