如何實現label長度固定,文字分散分布的效果

2021-09-12 17:19:57 字數 1038 閱讀 3177

我們經常會看到表單填寫時前面的label,都是左右對齊的,即使字數不一樣。就像下面的效果:

解析

這種效果主要通過text-align-last屬性來實現。

在菜鳥教程上對於這個屬性有這樣的描述:

text-align-last 屬性只有在 text-align 屬性設定為 "justify" 時才起作用。
但我嘗試了一下,當文字只有一行的時候,text-align屬性不設定,text-align-last也是有用的。當然這只是針對非ie和safiri而言。

text-align屬性對多行文字的最後一行文字無效。

/*css*/

.label

/*html*/

產 品

這樣的寫法,對ie瀏覽器和safari瀏覽器就不起作用了。因為text-align-last不支援這兩個瀏覽器。

針對這個問題,我們可以用偽類來解決。

/*css*/

.label

.label:after

/*html*/

產 品

有三點需要注意:

因為加了偽類之後,相當於在標籤的文字後又加了一行,所以text-align-last就不起作用了,需要加上text-align

加了偽類之後,標籤的文字之間必須要存在乙個空格(乙個就行,不用太多),否則的話,沒有效果。

兩種方案對比

第二種方法相對於第一種方法來說,相容性更好,我在多個瀏覽器測試了一下,都沒有問題。

第一種方案更簡潔,但是不支援ie和safari,所以建議大家還是用第二種方案更省心。

如何實現label長度固定,文字分散分布的效果

我們經常會看到表單填寫時前面的label,都是左右對齊的,即使字數不一樣。就像下面的效果 解析 這種效果主要通過text align last屬性來實現。在菜鳥教程上對於這個屬性有這樣的描述 text align last 屬性只有在 text align 屬性設定為 justify 時才起作用。但...

iOS根據文字長度動態計算label的大小

今天有人問我該怎麼根據label.text的文字,動態計算label的size,因為有的時候,會用到這個功能,例如,再tableview中,動態改變cell的高的的時候,會經常用到,於是,我就簡單謝了乙個demo,下面是主要 nsstring labeltext 這段 主要是用來測試用的,根據文字內...

iOS 根據文字的長度確定label的寬高

根據文字長度,固定label的寬度和字型大小,畫label的寬高。效果圖 如下 根據文字長度計算label的寬高 nsstring str 天將降大任於斯人也,必先苦其心志,勞其筋骨,餓其體膚,空乏其身,行夫亂其所為。天將降大任於斯人也,必先苦其心志,勞其筋骨,餓其體膚,空乏其身,行夫亂其所為。天將...