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

我们在Word文档中操作时,知道文本的对齐方式有4种,分别是左端对齐、居中对齐、右端对齐、两边对齐,具体效果如下所示

【前端实例】CSS实现文本内容两端对齐的小技巧_第1张图片

那么,前端如何通过CSS实现两边对齐呢?通过CSS2文档查询text-align可知有个justify属性能够实现文本两端对齐

【前端实例】CSS实现文本内容两端对齐的小技巧_第2张图片

但是当自己在CSS样式文件中加入 text-align: justify; 这句话时却无法实现两端对齐的效果,这是为什么?

这是因为两端对齐需要一个条件,那就是在满行的情况下才能实现对齐。接下来我们看下面的代码



	
		
		两端对齐
		
	
	
		
CSS实现文本内容两端对齐!
-->

效果如下图所示

CSS中给div的添加了伪类,宽度填满父类容器。这样做的目的就是将一行撑爆,使该行溢出,这样制造出多行效果时justify属性生效,从而实现了两端对齐效果,但是这样会导致空白区域的出现。想要解决这种问题,可以添加一个父容器,固定宽度将超出的部分隐藏掉。

大概是为了解决这种尴尬的现象,CSS3推出了“text-align-last ”属性,它规定了文本的最后一行的对齐方式。

【前端实例】CSS实现文本内容两端对齐的小技巧_第3张图片

只需要在容器中加入 text-align-last: justify 这句话就可实现文本两端对齐,这是因为当只有一行文本内容时,它也是最后一样。实际代码如下所示



	
		
		两端对齐
		
	
	
		
CSS实现文本内容两端对齐!

效果如下所示

 

你可能感兴趣的:(前端,HTML,CSS,text-aglin,justify)