快捷导航
蚂蚁部落 网站首页 实例代码 CSS实例 查看内容

text-align:justify两端对齐介绍

2017-8-29 11:13| 发布者: 蚂蚁小编| 查看: 364| 评论: 1|来自: 蚂蚁部落

text-align属性可以设置父元素内部行内元素或者文本的对齐方式。

但是有时候会发现即便设置了text-align: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>

上面的代码虽然应用了text-align: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;
  text-align-last: justify; 
}
</style>
</head>
<body>
<div>蚂蚁部落欢迎您您</div>
</body>
</html>

上面的代码添加如下属性即可实现:

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

但是上面的数据在IE8和IE8以下浏览器不支持,如果要全兼容,可以采用如下方式:

[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;
}
div:after {
  content: "";
  display: inline-block;
  position: relative;
  width: 100%;
}
</style>
</head>
<body>
<div>蚂蚁部落欢迎您您</div>
</body>
</html>

使用伪元素选择器,为div元素再加一个空的伪元素;为什么这样就能够实现两端对齐呢,这是因为 ustify只有在存在第二行的情况下,第一行才两端对齐,所以我们就通过伪元素选择器,在div的末尾再添加一个元素。


鲜花

握手

雷人

路过

鸡蛋
发表评论

最新评论

引用 yuantingjun 2017-9-11 11:34
http://chayangge.com/2016/01/18/text-align-justify%E6%9C%80%E5%90%8E%E4%B8%80%E8%A1%8C%E6%9C%89%E4%B8%AA%E5%9D%91/
这篇文章也不错。

查看全部评论(1)

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-10-19 02:25 , Processed in 0.066146 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部