css 文字两端对齐完全兼容的方法

justify 布局原理：实现文本段落两端对齐的CSS技巧

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

原创最新推荐文章于 2023-12-12 18:41:34 发布 · 297 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

前端专栏收录该内容

15 篇文章

订阅专栏

本文解析了如何使用CSS的text-align:justify属性和after伪元素实现段落内容的两端对齐，通过调整行高和空元素占据行高的方法确保内容布局效果。关键在于理解inline-block和伪元素的作用于应用场景。

<div class="someClass">测试</div>

<div class="someClass">测试123</div>

.someClass {text-align:justify; width:100px;height:20px;}

.someClass: after { content: ""; width:100%; display:inline-block;}

原理解析：

text-align:justify段落其他行两端对齐，但是段落最后一行会左对齐，所以加了一个after伪元素内容为空并且长度撑满保证伪元素另起一行inline-block与需要排版的内容连成一个整体，使得需要排版的内容成为倒数第二行，自然就会两端对齐了，因为伪元素另起了一行，元素就变高了，所以还要设置只显示一行文字的高度