css教程之text-align:justify 两端对齐

早些 2019-11-18 162 阅读

ext-align属性可以设置内联或者文本在其父元素内的对齐方式,应用非常频繁。
最为常用的属性值有三个,分别是left、center和right。
还有一个在某些场景下非常好用的属性值justify,它可以设置文本或者内联元素两端对齐。
在应用中,很多朋友可能会发现,此属性值有时候生效,有时候不生效。
下面通过代码实例介绍一下出现此问题的原因,以及解决方案。
首先看一段代码实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cxvn..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>乐分享 - 让开发更简单</div>
<div>乐分享 - 让开发更简单</div>
</body>
</html>

第一个div采用两端对齐方式,第二个是默认。
可以看到第一个div实现了两端对齐,第一行右侧没有空隙,第二个div第一行右侧空隙明显。
毫无疑问,justify属性值生效了,但是很多时候,此属性值并不生效,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cxvn.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>乐分享 - 让开发更简单</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.cxvn.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>乐分享 - 让开发更简单</div>
</body>
</html>

既然最后一行不生效,那么我们通过伪元素选择器:after再添加一行。
那么原来的文本就不再是最后一行,于是实现了浏览器全兼容效果。
此属性在某些效果中非常好用,比如表单文本框前面的前面的名称两端对齐会更加美观。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cxvn.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可以轻松实现。

最新游戏