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

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

hmk1900

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

阅读量216

点赞数

分类专栏：前端文章标签： css 前端 html

本文链接：https://blog.csdn.net/jjxp2011/article/details/127826191

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

<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与需要排版的内容连成一个整体，使得需要排版的内容成为倒数第二行，自然就会两端对齐了，因为伪元素另起了一行，元素就变高了，所以还要设置只显示一行文字的高度