单行文字两端对齐

关于两端对齐,有两个属性 text-align: justify; text-align-last: justify; 两端对齐其实对最后一行是不起作用的,在word中也是这样,其实就是排版需要。如果需要对最后一行设置两端对齐可以使用text-align-last但是这个属性 Chrome45 以下和 Safari 都不支持,这就麻烦了。

所以,对于单行文本我们只能用加一个伪元素让其成为文本的最后一行。

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

但是你发现除了IE,其他浏览器并没有起作用,所以这里还有一个坑,大部分浏览器两端对齐的实现都是通过调整字之间的空格大小来达成的,所以还要在每个单词和汉字间都插入一个空格,这样两端对其才会生效。

所以可见,高级浏览器都不太鸟单行文本两端对齐,也不知道设计师怎么想的,非要在输入框的 lable 弄个两端对齐……

参考阅读: Web前端实验室 » CSS3 justify

Licensed under CC BY-NC-SA 4.0