短标题自动两端对齐

Maxiye 发布于2019-08-29 13:24 / 1096人阅读

摘要：是为了让伪元素宽度和父元素相同并多带带占满一行。总结下来也就是说，伪元素自己独占了一行使浏览器认为该元素不是一行文字，而是两行，所以就生效了。

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

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

解决这个问题的就是它：

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 都可以同时生效。

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

专线服务云服务器文本两端对齐 html两端对齐 html标题自动换行两端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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