成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何實現(xiàn)label長度固定，文字分散分布的效果

stefanieliang / 2933人閱讀

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

我們經(jīng)常會看到表單填寫時前面的label,都是左右對齊的，即使字?jǐn)?shù)不一樣。就像下面的效果：

解析

這種效果主要通過text-align-last屬性來實現(xiàn)。

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

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

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

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

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

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

產(chǎn) 品

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

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

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

產(chǎn) 品

有三點(diǎn)需要注意：

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

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

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

兩種方案對比

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101980.html

相關(guān)文章

  • 如何實現(xiàn)label長度固定，文字分散分布的效果

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

    peixn 評論0 收藏0

  • 如何實現(xiàn)label長度固定，文字分散分布的效果

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

    hankkin 評論0 收藏0

  • 分布式系統(tǒng)關(guān)注點(diǎn)——想通關(guān)「限流」？只要這一篇

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

    CollinPeng 評論0 收藏0

  • 一致性Hash

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

    spacewander 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<