text-align-last safari 不支持的解决办法

最新推荐文章于 2024-08-21 16:13:13 发布

ISaiSai

最新推荐文章于 2024-08-21 16:13:13 发布

阅读量1.3w

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/ISaiSai/article/details/51744952

版权

CSS 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

单行文本需要分散两端对齐的时候可以使用（ie chrome）

text-align: justify;
text-align-last:justify;

但是safari 不支持 text-align-last
兼容性更好的方法是使用after伪类，添加一个空白行，使得当前行不是最后一行，实现等价于text-align-last:justify;分散对齐的效果。

重要：IE需要把文字拆分开，在文字之间添加空格才能使得justify 生效

见参考链接中：由于大部分浏览器两端对齐的实现，都是通过调整字之间的空格大小来达成的，所以我们事先在每个单词和汉字间都插入一个空格

  .container {
            background-color: gray;
            width: 200px;
            text-align: justify;
        }

        .container:after {
            content: '';
            width: 100%;
            display: inline-block;
        }

参考文档 http://stackoverflow.com/questions/6228347/text-align-justify-not-working
http://demo.doyoe.com/css3/justify/

IE拆分字符串，添加空格代码示例如下：

var text= "你好你好";
var result = text.split("").join(" ");

完整DEMO

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        .container {
            background-color: gray;
            width: 200px;
            text-align: justify;
        }

        .container:after {
            content: '';
            width: 100%;
            display: inline-block;
        }

    </style>
</head>
<body>
<div class="container">你好你好</div>


</body>
</html>