短标题自动两端对齐

2019年9月11日 130次阅读 来源: 剑士的草帽

前几天在交流群里碰到了这样的一个问题“怎样让下图这组短名字保持长度一致，两端对齐呢？”
《短标题自动两端对齐》

我在百度上查阅了一些文章，但是经过测试基本都没成功，最后找到一个可用的，并推理了一下原理，下面来跟大家分享一下。

解决这个问题的就是它：

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中需要这样写

<p>你 好 世 界</p>

也就是每个字中间需要打上空格如果直接写 “你好世界” 也是不生效的（当时搞得人是一头雾水啊），所以还是建议在chrome中也可以使用中间打上空格的这样 Chrome,Firefox,IE 都可以同时生效。

这个问题也是我找到生效的样式看代码推理来的，如果哪位大神有发现我的原理是错误的，希望可以指正并一起交流。

    原文作者：剑士的草帽
    原文地址: https://segmentfault.com/a/1190000011082604
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞