短標題自動兩端對齊

Maxiye 發布于2019-08-29 13:24 / 1219人閱讀

摘要：是為了讓偽元素寬度和父元素相同并多帶帶占滿一行。總結下來也就是說，偽元素自己獨占了一行使瀏覽器認為該元素不是一行文字，而是兩行，所以就生效了。

前幾天在交流群里碰到了這樣的一個問題“怎樣讓下圖這組短名字保持長度一致，兩端對齊呢？”

我在百度上查閱了一些文章，但是經過測試基本都沒成功，最后找到一個可用的，并推理了一下原理，下面來跟大家分享一下。

解決這個問題的就是它：

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

直接使用這個屬性經過測試在Chrome,Firefox,IE 都是不生效的。
因為這個方法只對兩行等以上的文字生效，單行不生效，如果想要這個方法生效的話，需要偽元素“::after”配合使用 (css代碼如下)：

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

下面說一下我個人推測的原理：

content：""

是為了讓元素生效，內容為空，實際上他是存在的，但是不可見，可以被瀏覽器識別。

 width:100%

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

display:inline-block;

特意寫上這句話是因為text-align: justify;只對inline或inline-block元素生效，但是在實際開發中，我們是無法避免元素可能是block塊級元素的，所以才加上了這一屬性。

總結下來也就是說，偽元素::after 自己獨占了一行使瀏覽器認為該元素不是一行文字，而是兩行，所以text-align: justify;就生效了。

其他一些問題：
1、在寫demo時發現，如果瀏覽器是Chrome的話，多帶帶寫text-align: justify;并不生效，
但是多帶帶寫text-align-last:justify;就生效了，并且不寫偽元素也可以，具體什么原因不知道，但是不建議使用，因為查閱資料發現 text-align-last:justify; 是針對IE瀏覽器的（雖然測試的時候他也沒生效吧）。

2、如果按照上面的偽元素方法在chrome中使用的話是可以生效的，但是在Firefox中又不生效了，是因為在firefox中需要這樣寫

你好世界

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

這個問題也是我找到生效的樣式看代碼推理來的，如果哪位大神有發現我的原理是錯誤的，希望可以指正并一起交流。

云服務器 GPU云服務器文本兩端對齊 html兩端對齊 html標題自動換行兩端

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

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

表單短標題不同字數兩端對齊問題

摘要：方法一利用屬性和參考熱門搜索電視機性感漂亮高跟鞋手機對齊牛仔褲小家碧玉家居這個值是看最長能顯示幾個文字，如，則為如果需要個字兩端對齊，則為這里是同上如果需要個字兩端對齊，則為這里是同上方法二利用透明字占方法一：利用letter-spacing屬性和em 參考：https://blog.csdn.net/muyutin... html 熱門搜索電視機性感漂亮 ...

vibiu 2019-08-30 15:55 評論0 收藏0
表單短標題不同字數兩端對齊問題

摘要：方法一利用屬性和參考熱門搜索電視機性感漂亮高跟鞋手機對齊牛仔褲小家碧玉家居這個值是看最長能顯示幾個文字，如，則為如果需要個字兩端對齊，則為這里是同上如果需要個字兩端對齊，則為這里是同上方法二利用透明字占方法一：利用letter-spacing屬性和em 參考：https://blog.csdn.net/muyutin... html 熱門搜索電視機性感漂亮 ...

xcc3641 2019-08-02 13:56 評論0 收藏0
手機端單行文字兩端對齊：用css偽類實現

摘要：今天在做項目的時候碰到這個問題右側紅線內的小標題單行兩端對齊。兩端對齊的屬性我們知道是，但是這個屬性有它的局限性只能為或多行文字才能實現兩端對齊。也就是說，在現在的情況下，小標題的單行文字僅僅使用是實現不了兩端對齊的。今天在做項目的時候碰到這個問題：右側紅線內的小標題單行兩端對齊。 showImg(https://segmentfault.com/img/bVQv1a?w=319&h...

JasonZhang 2019-08-29 12:53 評論0 收藏0
CSS實現文字兩端對齊

摘要：后面查閱資料發現可以實現最后一行兩端對齊，但似乎兼容性很差不支持最近的項目遇到了這樣的需求：（要求標題部分不管文字多少，都必須兩端對齊） ? 如下圖：當時也沒有多想直接使用‘ ’進行代替，畢竟產品同學想快一點看到效果，不敢怠慢！不過到第二個頁面就傻眼了。 ? 如圖：這很明顯‘ ’已經無法滿足我了，只好上。這里簡單說下幾種空格的區別： ? ? ? 半角...

Baaaan 2019-04-23 13:16 評論0 收藏0
margin詳解

摘要：屬性指定了盒的區的寬度。簡寫屬性一次性設置四周的，而其它屬性只設置它們各側的。 margin屬性指定了盒的margin區的寬度。margin簡寫屬性一次性設置四周的margin，而其它margin屬性只設置它們各側的。這些屬性適用于所有元素，但非替換行內元素上的豎直margin將不會產生任何效果 margin與容器尺寸 margin與可視尺寸 margin與可視尺寸只適用于沒有設定...

stonezhu 2019-08-29 12:25 評論0 收藏0