css3总结之： text-align: justify （两端对齐）

青春..荒唐

浏览: 978648 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS

大家都知道 text-align 属性是规定元素中的文本的水平对齐方式，最常用的值是left、right、center，那么justify是什么呢？

　　在W3C上是这样介绍的：

　　　　justify 可以使文本的两端都对齐在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等（但会带来一些问题）

先举个简单例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .demo{
            width: 70px;
            /*text-align: justify;*/
        }
    </style>
</head>
<body>
    <div class = 'demo'>
        <p>飞洒发fd达fasdf省sdf份发f送fdfd大df夫df萨</p>
    </div>
</body>
</html>

上面例子显示正常

下面我们来说下text-algin:justify属性带来的问题

1.【单行设置text-align:justify不起作用】

先来看个例子：

<p class="center">我是两端对齐文字端对齐文字</p>
.center{
  text-align:justify;
}

我们发现，段落单行时设置text-align:justify属性无效，查阅后得知（原因如下）：

text-align不会处理被打断的行和最后一行，因为这里的文字只占了一行，也是最后一行了，所以text-align设置为justify不会产生任何效果

解决方法：使用text-align-last，并将其设置为justify。不过不幸的是，text-align-last不是所有浏览器支持。

所以对于不支持text-align-last的，可以在最后一行人工生成两行文本，然后把第二行隐藏了，那么我们要现实的第一行自然就可以实现两端对齐了

这个问题是我在项目中碰到的，由于我发现这个问题不可行，于是各种&ensp;&emsp; 各种用。但是发现在safari中微软雅黑不识别&emsp;等，于是只能找解决办法。最终在开心网的源代码中找到了解决办法。具体想法是：

　　首先既然单行不行，那么就用多行。但是怎么用单行呢？——（1）用after或者（2）添加标签，就是在最后一行人工生成两行文本，然后把第二行隐藏了，那么我们要现实的第一行自然就可以实现两端对齐了

方案一：（原理与方案二相同，隐藏第2行；但是需要将span设置为float: left，:after为inline-block）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            width: 100px;
            text-align: justify;
            float: left;
        }
        span:after{
            content:'.';
            width: 100%;
            display: inline-block;
            overflow: hidden;
            height: 0;
        }
        input{
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="demo">
        <span>昵称</span>：<input type="text" style = 'width: 100px'><br><br>
        <span>电子邮箱</span>：<input type="email" style = 'width: 100px;'>
    </div>
</body>
</html>

方案二：（添加标签，原理隐藏第2行）

<p class="center">我是两端对齐文字端对齐文字<span></span></p>
.center{
  text-align:justify;
}
span{
  display:inline-block;
  width:100%;
  height: 0;
  margin: 0;
}

2.【IE兼容问题】

text-align:justify可以使文字两端对齐，但IE下不正常

方案：

ie兼容属性text-justify，给div加上text-justify:inter-ideograph; 在ie下效果就正常了，text-justify只在ie下有用，而且必须和text-align:justify一起使用才有效

3.【应用举例】

如果这个方法排版会是怎样的呢？

<ul class="justify_list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<style type="text/css">
    .justify_list{text-align: justify;text-justify:distribute-all-lines;width: 600px;}
    li{width:100px;    height:100px;background-color: #0086b3;    
       display: inline-block; list-style:none; }
</style>

效果：第二行显示错乱

经过查询才知道原来是text-align:justify 不处理块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）

既然如此，解决方法就简单了：

.justify_list:after {width: 100%;height: 0;margin: 0;display: inline-block;
                     overflow: hidden;content: '';}

总体来说实现得还不错。在排版的时候不需要计算每个列表元素间的margin间距，比用float的时候省事很多。

4.【好处】

简单方便，只要一个简单的text-align:justify声明，里面的元素就自动等间距两端对齐布局啦！根本无需计算每个列表元素间的margin间距，更不用去修改父容器的宽度

【总结】

①text-align一行文本不进行处理，还有就是强制换行的也不处理

分享到：

CSS3玻璃流光特效 | DTD笔录

2018-01-31 22:32
浏览 5334
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论