css3屬性text justify兩端對齊

2021-08-22 08:21:24 字數 484 閱讀 9842

text-align:justify可以使文字的兩端都對齊,在兩端對齊文字中,文字行的左右兩端都放在父元素的內邊界上,然後,調整單詞和字母的間隔,使各行的長度恰好相等。如果內容很少被拉開的距離太長,可以使用letter-spacing收縮一下字元間的距離。

相信好多人在使用的時候會發現最後一行不管用,因為text-align:justify不對快內的最後一行文字做處理,所以當內容只有一行的時候也不會做處理。(只有一行的時候,既是第一行也是最後一行)

這個時候我們要新增一行作為最後一行

.justify:after
完整的**如下:

說明:列表元素的首尾標籤要有空隙(空格或者換行)

寫成是錯誤的,是沒有兩端對齊效果的

.justify_list

.justify_list li

.justify_list:after

希望總結的對大家有幫助。

CSS3新增屬性用法整理CSS3新增屬性用法整理

css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...

CSS3新增屬性(3)

1.定義動畫 用keyframes 定義動畫 類似定義類選擇器 keyframes 動畫名稱 100 動畫序列 0 是動畫的開始,100 是動畫的完成,這樣的規則就是動畫序列。在 keyframes 中規定某項css樣式,就能建立由當前樣式逐漸改為新樣式的動畫效果。動畫是使元素從一種樣式逐漸變化為另...

css3 新增屬性

background origin 背景影象顯示的原點。background clip 規定背景的繪製區域。padding box 從padding區域 含padding 開始顯示背景影象。border box 從border區域 含border 開始顯示背景影象。content box 從cont...