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

单行文本需要分散两端对齐的时候可以使用(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


<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>

你可能感兴趣的:(CSS)