代码描述:text-align:justify 两端对齐。text-align:justify 两端对齐
ext-align属性可以设置内联或者文本在其父元素内的对齐方式,应用非常频繁。 最为常用的属性值有三个,分别是left、center和right。 还有一个在某些场景下非常好用的属性值justify,它可以设置文本或者内联元素两端对齐。 在应用中,很多朋友可能会发现,此属性值有时候生效,有时候不生效。 下面通过代码实例介绍一下出现此问题的原因,以及解决方案。 首先看一段代码实例:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51qianduan..com/" /> <title>text-align:justify 两端对齐</title> <style type="text/css"> *{ margin:0; padding:0; border:0; } div { width:300px; height:50px; background:#ccc; } div:first-child{ text-align:justify; } </style> </head> <body> <div>51前端 - 让开发更简单</div> <div>51前端 - 让开发更简单</div> </body> </html>
第一个div采用两端对齐方式,第二个是默认。 可以看到第一个div实现了两端对齐,第一行右侧没有空隙,第二个div第一行右侧空隙明显。 毫无疑问,justify属性值生效了,但是很多时候,此属性值并不生效,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>text-align:justify 两端对齐</title> <style type="text/css"> *{ margin:0; padding:0; border:0; } div { width:300px; height:50px; background:#ccc; text-align:justify; } </style> </head> <body> <div>51前端 - 让开发更简单</div> </body> </html>
虽然为div元素设置了text-align:justify,但是并没有实现两端对齐效果。 因为此属性值对于最后一行无效,单行文本虽然是第一行,但也是最后一行,所以不生效。 解决方案非常简单,添加如下CSS属性即可:
text-align-last: justify;
从属性的名称来看,它用来规定最后一行是否具有两端对齐效果。 添加上述属性之后,效果肯定是好用的,本文不再演示,但是有一个小的缺陷,那就是低版本IE浏览器不支持,虽然当前已不是什么大问题,毕竟低版本IE用户已经很少了, 如果想做到机智,那么可以采用如下方式兼容,代码修改如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>text-align:justify 两端对齐</title> <style type="text/css"> *{ margin:0; padding:0; border:0; } div { width:300px; height:50px; background:#ccc; text-align:justify; text-align-last: justify; } div:after { content:'.'; width: 100%; display: inline-block; overflow: hidden; height: 0; } </style> </head> <body> <div>51前端 - 让开发更简单</div> </body> </html>
既然最后一行不生效,那么我们通过伪元素选择器:after再添加一行。 那么原来的文本就不再是最后一行,于是实现了浏览器全兼容效果。 此属性在某些效果中非常好用,比如表单文本框前面的前面的名称两端对齐会更加美观。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>text-align:justify 两端对齐</title> <style> span{ float: left; width: 100px; text-align: justify; text-align-last: justify; } input{ width: 100px; } </style> </head> <body> <div> <span>姓名</span>:<input type="text"><br><br> <span>电子邮箱</span>:<input type="email"> </div> </body> </html>
是不是实现上述效果曾经困扰过一些朋友,采用text-align:justify可以轻松实现。
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能