您的位置:首页> 实例代码> CSS实例

text-align:justify 两端对齐

2019-1-21 01:08| 作者: admin| 查看: 932| 评论: 0|来自: 蚂蚁部落

text-align属性可以设置内联或者文本在其父元素内的对齐方式,应用非常频繁。

最为常用的属性值有三个,分别是left、center和right。

还有一个在某些场景下非常好用的属性值justify,它可以设置文本或者内联元素两端对齐。

在应用中,很多朋友可能会发现,此属性值有时候生效,有时候不生效。

下面通过代码实例介绍一下出现此问题的原因,以及解决方案。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/21/010925pjdxysgdiwchwzuc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第一个div采用两端对齐方式,第二个是默认。

可以看到第一个div实现了两端对齐,第一行右侧没有空隙,第二个div第一行右侧空隙明显。

毫无疑问,justify属性值生效了,但是很多时候,此属性值并不生效,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/21/011016cqxixstw1d1qwx1d.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

虽然为div元素设置了text-align:justify,但是并没有实现两端对齐效果。

因为此属性值对于最后一行无效,单行文本虽然是第一行,但也是最后一行,所以不生效。

解决方案非常简单,添加如下CSS属性即可:

[CSS] 纯文本查看 复制代码
text-align-last: justify;

从属性的名称来看,它用来规定最后一行是否具有两端对齐效果。

添加上述属性之后,效果肯定是好用的,本文不再演示,但是有一个小的缺陷,那就是低版本IE浏览器不支持,虽然当前已不是什么大问题,毕竟低版本IE用户已经很少了, 如果想做到机智,那么可以采用如下方式兼容,代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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再添加一行。

那么原来的文本就不再是最后一行,于是实现了浏览器全兼容效果。

此属性在某些效果中非常好用,比如表单文本框前面的前面的名称两端对齐会更加美观。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/21/011431ev5vzw5j4r8eq4qe.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

是不是实现上述效果曾经困扰过一些朋友,采用text-align:justify可以轻松实现。

原理前面已经介绍过了,如果有任何问题,可以在文章底部留言,本站会第一时间回复。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部