我们在Word文档中操作时,知道文本的对齐方式有4种,分别是左端对齐、居中对齐、右端对齐、两边对齐,具体效果如下所示
那么,前端如何通过CSS实现两边对齐呢?通过CSS2文档查询text-align可知有个justify
属性能够实现文本两端对齐
但是当自己在CSS样式文件中加入 text-align: justify; 这句话时却无法实现两端对齐的效果,这是为什么?
这是因为两端对齐需要一个条件,那就是在满行的情况下才能实现对齐。接下来我们看下面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两端对齐</title>
<style type="text/css">
div{
width:300px;
padding: 5px;
text-align: justify;
border: 1px solid rgba(0,0,0,0.1);
}div:after {
width: 100%;
content: " ";
display: inline-block;
}
</style>
</head>
<body>
<div>CSS实现文本内容两端对齐!</div>
</table>-->
</body>
</html>
效果如下图所示
CSS中给div的添加了伪类,宽度填满父类容器。这样做的目的就是将一行撑爆,使该行溢出,这样制造出多行效果时justify属性生效,从而实现了两端对齐效果,但是这样会导致空白区域的出现。想要解决这种问题,可以添加一个父容器,固定宽度将超出的部分隐藏掉。
大概是为了解决这种尴尬的现象,CSS3推出了“text-align-last ”属性,它规定了文本的最后一行的对齐方式。
只需要在容器中加入 text-align-last: justify 这句话就可实现文本两端对齐,这是因为当只有一行文本内容时,它也是最后一样。实际代码如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两端对齐</title>
<style type="text/css">
div{
width:300px;
padding: 5px;
text-align-last: justify;
border: 1px solid rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div>CSS实现文本内容两端对齐!</div>
</body>
</html>
效果如下所示