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

hankkin 發布于2019-08-02 14:17 / 614人閱讀

摘要：就像下面的效果解析這種效果主要通過屬性來實現。屬性對多行文本的最后一行文本無效。區別如下加了偽類之后，標簽的文字之間必須要存在一個空格一個就行，不用太多，否則的話，沒有效果。

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

解析

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

text-align-last：規定如何對齊文本的最后一行

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

text-align-last 屬性只有在 text-align 屬性設置為 "justify" 時才起作用。

但我嘗試了一下，當文本只有一行的時候，text-align屬性不設置，text-align-last也是有用的。當然這只是針對非IE和Safiri而言。

text-align屬性對多行文本的最后一行文本無效。

/*css*/
.label {
      width: 200px;
      text-align-last: justify; 
}
/*html*/
產 品

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

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

/*css*/
.label {
      width: 200px;
      height: 30px; /*高度需要添加，不然文字下面會多出一些空隙*/
      text-align: justify; 
}
 .label:after{
        content: "";
        display: inline-block;
        width: 100%;
      }
/*html*/
產 品

有三點需要注意：

因為加了偽類之后，相當于在標簽的文本后又加了一行，所以text-align-last就不起作用了，需要加上text-align

因為加了偽類之后，文本后面會多出一行，即使給偽類設置高度為0也不行。所以必須給.label屬性加上一個高度。區別如下：

加了偽類之后，標簽的文字之間必須要存在一個空格（一個就行，不用太多），否則的話，沒有效果。

兩種方案對比

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

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

GPU云服務器云服務器 js如何實現3d效果固定長度分布式存儲如何實現 php固定長度輸出

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53704.html

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

摘要：就像下面的效果解析這種效果主要通過屬性來實現。屬性對多行文本的最后一行文本無效。區別如下加了偽類之后，標簽的文字之間必須要存在一個空格一個就行，不用太多，否則的話，沒有效果。我們經常會看到表單填寫時前面的label,都是左右對齊的，即使字數不一樣。就像下面的效果： showImg(https://segmentfault.com/img/bVboImo?w=482&h=169); 解...

peixn 2019-08-30 15:55 評論0 收藏0
如何實現label長度固定，文字分散分布的效果

摘要：就像下面的效果解析這種效果主要通過屬性來實現。屬性對多行文本的最后一行文本無效。區別如下加了偽類之后，標簽的文字之間必須要存在一個空格一個就行，不用太多，否則的話，沒有效果。我們經常會看到表單填寫時前面的label,都是左右對齊的，即使字數不一樣。就像下面的效果： showImg(https://segmentfault.com/img/bVboImo?w=482&h=169); 解...

stefanieliang 2019-08-23 15:23 評論0 收藏0
分布式系統關注點——想通關「限流」？只要這一篇

摘要：之前有了解到哥的一部分讀者們沒有充分搞清楚限流和熔斷的關系。后者表示系統在同一時刻能處理的最大請求數量，比如次的并發。后續限流策略需要設定的具體標準數值就是從這些指標中來的。限流閾值不繼續處理請求。如果這是第二次看到我的文章，歡迎掃描文末二維碼訂閱我喲~本文長度為2869字，建議閱讀8分鐘。可能你在網上看過不少「限流」相關的文章，但是z哥的這篇可能是最全面，最深入淺出的一篇了（容我...

CollinPeng 2019-08-16 13:57 評論0 收藏0
一致性Hash

摘要：當時十分興奮，立即去找了關于一致性協議的文章來看。到了今天再去回想，發現對一致性協議的概念已經模糊不清了。一致性算法一致性哈希算法在年由麻省理工學院的等人在解決分布式中提出的，設計目標是為了解決因特網中的熱點問題，初衷和十分類似。序第一次知道一致性Hash協議是在方騰飛的技術文章實戰解析-論三年內快速成長為一名技術專家里看到的。問：對于三十歲的程度員，如果還想再深入做技術，有什么...

spacewander 2019-08-16 13:25 評論0 收藏0