文字兩端對齊text align justify

2021-10-16 14:47:35 字數 1281 閱讀 5235

使用text-align:justify可以實行文字兩端對齊,但他在大段文字中使用效果較好。因為該屬性會自動忽略最後一行。由下面兩圖可以看出,加了justify屬性,文字會兩端對齊,除了最後一行,這也符合一般規範。

未加text-align:justify

加了text-align:justify

但是讓下面的實現兩端對齊,只加justify屬性是不行的,因為他只有一行,預設被認為是最後一行。

就很不美觀

兩端對齊

html

>

class

="box1"

>

class

="name"

>

姓名span

>

:div

>

class

="box2"

>

class

="id"

>

身份證號span

>

:div

>

body

>

1. 使用text-align-last: justify;

.name

效果

2. 使用偽元素

.name

.name::after

效果

可以看出偽元素的使用增大了span的高度,這時候可以使用height來縮小這個高度。

要點:

使用after將偽元素放在需要兩端對齊的元素後面,作為第二行;

設定after的width為100%,生成第二行;

設定為行內塊元素,設定的width才有效。

文字兩端對齊

學習貼 最近在工作專案中接觸到web介面設計的問題,要實現文字兩端對齊的效果。在網上搜尋了一下,用的都是類似的技巧 text align justify text justify inter ideograph 我遇到問題是 看不到效果,無論是英文還是中文,在ie和chrome下都不起作用。還好在s...

css text align文字兩端對齊

text align start end left right center justify match parent justify all justify 內容兩端對齊,但對於強制打斷的行 被打斷的這一行 及最後一行 包括僅有一行文字的情況,因為它既是第一行也是最後一行 不做處理。start 內...

表單文字兩端對齊

1.在頁面布局的時候,只要有表單就存在這個對齊方式的應用。1 doctype html 2 html 3 head lang en 4 meta charset utf 8 5 title 文字2端對齊 title 6 meta content width device width,initial ...