css:text-align 两端对齐常见问题

兼容性问题

text-align: justify;两端对齐IE、火狐不兼容解决方案
text-align: justify;在火狐与IE中不起作用。加上下边两行就阔以啦！

1
2
3

text-align: justify;
word-break: break-all;
text-justify: distribute;

单行无法两端对齐

text-align: justify;最后一行是无法生效的，如果只有一行，就会默认为是最后一行。
我们可以通过设置justify-all或者text-align-last就阔以解决这个问题

1
2
3

justify-all: justify;
/* 或者 */
text-align-last: justify;

需要注意的是text-align-last并不是所有浏览器都支持的！

如果遇到了不支持text-align-last的浏览器，可以通过::after伪元素模拟一行

1
2
3
4
5

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

需要注意的是这样会增加元素的高度。