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可以轻松实现。

代码描述：text-align:justify 两端对齐。text-align:justify 两端对齐

下载全部收藏

401 534

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册

月映东窗

作品：41 | 粉丝：21

关注

TA的相关作品 >>更多

热搜关键词

text-align:justify 两端对齐

CSS 匹配指定name元素

position:sticky定位元素是否在同一父元素中区别

position: sticky是否脱离文档流

CSS position:sticky与position:fixed区别

@import与<link> 的区别

CSS input文本框样式