短標(biāo)題自動(dòng)兩端對(duì)齊

Maxiye 發(fā)布于2019-08-29 13:24 / 1229人閱讀

摘要：是為了讓偽元素寬度和父元素相同并多帶帶占滿一行。總結(jié)下來(lái)也就是說(shuō)，偽元素自己獨(dú)占了一行使瀏覽器認(rèn)為該元素不是一行文字，而是兩行，所以就生效了。

前幾天在交流群里碰到了這樣的一個(gè)問(wèn)題“怎樣讓下圖這組短名字保持長(zhǎng)度一致，兩端對(duì)齊呢？”

我在百度上查閱了一些文章，但是經(jīng)過(guò)測(cè)試基本都沒(méi)成功，最后找到一個(gè)可用的，并推理了一下原理，下面來(lái)跟大家分享一下。

解決這個(gè)問(wèn)題的就是它：

text-align: justify;
text-align-last:justify;//IE

直接使用這個(gè)屬性經(jīng)過(guò)測(cè)試在Chrome,Firefox,IE 都是不生效的。
因?yàn)檫@個(gè)方法只對(duì)兩行等以上的文字生效，單行不生效，如果想要這個(gè)方法生效的話，需要偽元素“::after”配合使用 (css代碼如下)：

element::after {
    content:"";
    width:100%;
    display:inline-block;
}

下面說(shuō)一下我個(gè)人推測(cè)的原理：

content：""

是為了讓元素生效，內(nèi)容為空，實(shí)際上他是存在的，但是不可見(jiàn)，可以被瀏覽器識(shí)別。

 width:100%

是為了讓偽元素寬度和父元素相同并多帶帶占滿一行。

display:inline-block;

特意寫(xiě)上這句話是因?yàn)閠ext-align: justify;只對(duì)inline或inline-block元素生效，但是在實(shí)際開(kāi)發(fā)中，我們是無(wú)法避免元素可能是block塊級(jí)元素的，所以才加上了這一屬性。

總結(jié)下來(lái)也就是說(shuō)，偽元素::after 自己獨(dú)占了一行使瀏覽器認(rèn)為該元素不是一行文字，而是兩行，所以text-align: justify;就生效了。

其他一些問(wèn)題：
1、在寫(xiě)demo時(shí)發(fā)現(xiàn)，如果瀏覽器是Chrome的話，多帶帶寫(xiě)text-align: justify;并不生效，
但是多帶帶寫(xiě)text-align-last:justify;就生效了，并且不寫(xiě)偽元素也可以，具體什么原因不知道，但是不建議使用，因?yàn)椴殚嗁Y料發(fā)現(xiàn) text-align-last:justify; 是針對(duì)IE瀏覽器的（雖然測(cè)試的時(shí)候他也沒(méi)生效吧）。

2、如果按照上面的偽元素方法在chrome中使用的話是可以生效的，但是在Firefox中又不生效了，是因?yàn)樵趂irefox中需要這樣寫(xiě)

你好世界

也就是每個(gè)字中間需要打上空格如果直接寫(xiě) “你好世界” 也是不生效的（當(dāng)時(shí)搞得人是一頭霧水啊），所以還是建議在chrome中也可以使用中間打上空格的這樣 Chrome,Firefox,IE 都可以同時(shí)生效。

這個(gè)問(wèn)題也是我找到生效的樣式看代碼推理來(lái)的，如果哪位大神有發(fā)現(xiàn)我的原理是錯(cuò)誤的，希望可以指正并一起交流。