CSS 文字两端对齐的样式怎么写？

NSFish 发布于2019-08-29 14:15 / 2523人阅读

摘要：第二次尝试之前说了看英文原版的文档，好的，我发现了一个很不错的属性值。好东西啊好东西，在的基础上新增了对最后一行的作用。我发现了一个属性叫，它可以控制最后一行的文字对齐。效果就是文章最开始的图片。，我觉得英文版可信度更高吧。

前言

这是一个很短的文章，内容也不多，目的其实在于吐槽MDN文档。

需求

实现下图中的样式：

实现

文档结构：

你好

我爱中国

我是谁

第一次尝试

很简单嘛，使用text-align:justify不就好了？

p{
    position:relative;
    width:6em;
    text-align:justify;
}
p:after{
  content:":";
  position:absolute;
  right:-4px;
}

看看效果：

纳尼？让我来看看文档：

justify:The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.

这里提醒一句，MDN上的text-align不要看中文版，英文原版要详细。

看文档的意思，justify属性值不能作用在最后一行嘛。难怪没有起作用。

第二次尝试

之前说了看英文原版的文档，好的，我发现了一个很不错的属性值：justify-all。

justify-all:Same as justify, but also forces the last line to be justified.

好东西啊好东西，在justify的基础上新增了对最后一行的作用。赶紧试试：

p{
    width:6em;
    text-align:justify-all;
}

这下应该可以了吧，来看看效果：

蛤，怎么又没用？F12检查看看：

这又是什么操作？属性值居然无效。我又仔细看了看文档，翻到最后无语了：

大哥，你这啥浏览器都不能用的属性值写了干嘛……当然，我只是发发牢骚，这个属性应该是CSS3规范里有但是浏览器没实现而已。

解决方法

折腾了一会儿，最后还是要解决问题的。我发现了一个属性叫text-align-last，它可以控制最后一行的文字对齐。

p{
  position:relative;
  width:6em;
  text-align:justify;
  text-align-last:justify;
}

效果就是文章最开始的图片。

总结

写这篇文章就是想记录一下text-align-last属性及其应用，同时吐槽一下MDN文档。除了文章里说的“废物”justify-all，还有中文版里直接省略justify-all这一不严谨的行为，而且还多了个string属性。

emmmm，我觉得英文版可信度更高吧。所以我在中文版中新增了justify-all，string我没敢删……

最后，文章中若有错误，还请不吝赐教，非常感谢。

云服务器 GPU云服务器 css样式怎么写文本两端对齐 html两端对齐 css的样式

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

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

探索发现：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
小技巧|CSS如何实现文字两端对齐

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

DevWiki 2019-08-30 15:53 评论0 收藏0
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...

Berwin 2019-08-01 17:42 评论0 收藏0