css3总结之: text-align: justify (两端对齐)

2018-02-03 10:27:39来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

        大家都知道 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 >我是两端对齐文字端对齐文字</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;&nbsp;各种用。但是发现在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 >        <span>昵称</span>:<input type="text" style = 'width: 100px'><br><br>        <span>电子邮箱</span>:<input type="email" style = 'width: 100px;'>    </div></body></html>

      方案二:(添加标签,原理隐藏第2行)

<p >我是两端对齐文字端对齐文字<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 >    <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一行文本不进行处理,还有就是强制换行的也不处理

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台