【前端实例】CSS实现文本内容两端对齐的小技巧

最新推荐文章于 2023-12-12 18:41:34 发布

LaoYe - IT

最新推荐文章于 2023-12-12 18:41:34 发布

阅读量2.2k

点赞数 1

分类专栏：前端文章标签： HTML CSS text-aglin justify

本文链接：https://blog.csdn.net/rao_limon/article/details/100044392

版权

前端专栏收录该内容

73 篇文章 3 订阅

订阅专栏

我们在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>

效果如下所示