杂学

text-align:justify使用心得

2018-07-30  本文已影响0人  jason92

关于text-align:justify的使用心得

有时候我们会碰到下面这样的对齐方式


demo.jpg

一般限定宽度后设置text-align:justify,发现无效,这是因为text-align:justify;只对最后一行之前的行生效,当文本只有一行的时候,既是第一行,也是最后一行;所以只有一行的时候需要特殊处理。

这里有两种方式:
1.设置text-align-last:justify;不过text-align-last不是所有浏览器支持。例如safari。
2.加一个伪类

XXX:after {
        content: "";
        width: 100%;
        height: 0;
        margin: 0;
        display: inline-block;
        overflow: hidden;
      }

再来说下,多行的时候,既然文字从左到右已经排满了,那设置text-align为left center right justify有什么区别呢,看看这张图片你就懂了,上面是设置了justify,下面是没有样式的情况。


demo2.jpg
上一篇下一篇

猜你喜欢

热点阅读