发布于 2023-09-21 01:46:59 浏览 200 次
.container {
text-align: justify;
}
.container::after {
content: '';
display: inline-block;
width: 100%;
}
3、
上述代码将 .container 元素内的文本内容两边对齐。通过设置 ::after 伪元素,并将其宽度设置为100%,可以确保最后一行文本也能够得到完全对齐。
4、
请注意,这种方法只适用于多行文本。对于单行文本,使用 text-align: justify; 并不能达到真正的两边对齐效果,因为浏览器只会在文本之间插入空白字符来尝试达到对齐效果。
5、
另外,需要注意的是,text-align: justify; 可能会导致最后一行的间距比较大,这是因为浏览器会根据需要增加额外的间距来填充行宽度。如果你想避免这种情况,可以考虑使用其他的 CSS 技术,如 Flexbox 或 Grid。