CSS实现文字两端对齐

Baaaan 发布于2019-04-23 13:16 / 1164人阅读

摘要：后面查阅资料发现可以实现最后一行两端对齐，但似乎兼容性很差不支持

最近的项目遇到了这样的需求：（要求标题部分不管文字多少，都必须两端对齐）

如下图：

当时也没有多想直接使用‘ ’进行代替，毕竟产品同学想快一点看到效果，不敢怠慢！不过到第二个页面就傻眼了。

如图：

这很明显‘ ’已经无法满足我了，只好上。

这里简单说下几种空格的区别：

半角的不断行的空白格

半角的空格

全角的空格

页面效果倒是有了，但是后面复盘的时候发现这样的写法一是不灵活（虽然这里是固定内容），二是不够语义化。所以自然想通过css的方式来解决，在text-align中我们可能用到最多的是center属性，还有一个属性是justify（两端对齐），不过页面刷新后并没有（luan）用。其实这里的text-align：justify是可以多带带使用的，前提是文本需要超过两行，并且最后一行不会两端对齐。

因此我们需要借助一个空标签span。

html:

css:

div{
  width:200px;
  text-align: justify;
}
div span{
  display:inline-block;
  width:100%;
}

这里最完美的做法是使用::after伪元素代替空标签。

PS：后面查阅资料发现text-align-last: justify;可以实现最后一行两端对齐，但似乎兼容性很差（Safari不支持）

CANIUSE

GPU云服务器云服务器文本两端对齐 html两端对齐文字对齐文字靠右对齐html

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

转载请注明本文地址：https://www.ucloud.cn/yun/1655.html

小技巧|CSS如何实现文字两端对齐

摘要：需求如下，红框所在的文字有四个字的三个字的两个字的，如果不两端对齐可以选择居中对齐，或者右对齐。其实现的效果就是可以让一行文字两端对齐显示文字内容要超过一行。 showImg(https://segmentfault.com/img/remote/1460000011336397); 需求如下，红框所在的文字有四个字的、三个字的、两个字的，如果不两端对齐可以选择居中对齐，或者右对齐。但...

DevWiki 2019-08-30 15:53 评论0 收藏0
手机端单行文字两端对齐：用css伪类实现

摘要：今天在做项目的时候碰到这个问题右侧红线内的小标题单行两端对齐。两端对齐的属性我们知道是，但是这个属性有它的局限性只能为或多行文字才能实现两端对齐。也就是说，在现在的情况下，小标题的单行文字仅仅使用是实现不了两端对齐的。今天在做项目的时候碰到这个问题：右侧红线内的小标题单行两端对齐。 showImg(https://segmentfault.com/img/bVQv1a?w=319&h...

JasonZhang 2019-08-29 12:53 评论0 收藏0
探索发现：CSS实现中文两端对齐

摘要：今天在搜索实现中文两端对齐的解决方法时，偶然发现了这个我遇到问题是看不到效果，无论是英文还是中文，在和下都不起作用。首先，大家要知道，是专门为英文设计的，谁叫是老外发明的呢，用来实现英文语句的两端对齐。今天在搜索CSS实现中文两端对齐的解决方法时，偶然发现了这个hack：我遇到问题是：看不到效果，无论是英文还是中文，在IE和chrome下都不起作用。还好在StackOverflo...

Aomine 2019-08-29 10:58 评论0 收藏0
探索发现：CSS实现中文两端对齐

摘要：今天在搜索实现中文两端对齐的解决方法时，偶然发现了这个我遇到问题是看不到效果，无论是英文还是中文，在和下都不起作用。首先，大家要知道，是专门为英文设计的，谁叫是老外发明的呢，用来实现英文语句的两端对齐。今天在搜索CSS实现中文两端对齐的解决方法时，偶然发现了这个hack：我遇到问题是：看不到效果，无论是英文还是中文，在IE和chrome下都不起作用。还好在StackOverflo...

luffyZh 2019-08-01 15:24 评论0 收藏0