css字体两端对齐-真正有用的 CSS 文本对齐方式

bendan520 2023年8月29日 css 0

真正有用的 CSS 文本对齐方式

最近在工作项目中接触到Web界面设计的问题，需要实现两端文字对齐的效果。 我在网上搜了一下，几乎都是互相转发，用的方法都差不多：

两端左对齐css_css字体两端对齐_两端字体对齐怎么设置

text-align:justify;
text-justify:inter-ideograph;

但问题是，为什么我看不到效果呢？ 无论是中文还是英文，在IE和Chrome下都不起作用。 后来终于在StackOverflow上找到了解决方案。

形状：

下面显示了一些内联代码片段。

两端字体对齐怎么设置_两端左对齐css_css字体两端对齐

div.justify {
 text-align: justify; 
 width:200px; 
 font-size:15px; 
 color:red; 
 border:1px solid blue;
 height:18px;
 }
div.justify > span {
 display: inline-block /* Opera */; 
 padding-left: 100%; 
}

HTML：

css字体两端对齐_两端字体对齐怎么设置_两端左对齐css

<div class="justify">hello, text justify.</div><br/>
<div class="justify"> hello, text justify.<span></span></div><br/>
<div class="justify">中 文 两 端 对 齐</div><br/>
<div class="justify">中 文 两 端 对 齐<span></span></div>

功效图：

两端字体对齐怎么设置_两端左对齐css_css字体两端对齐

从效果图可以看出，不仅需要给块级元素添加text-align: justify样式，还需要为其添加一个空的span元素并应用该样式。 另外css字体两端对齐，对于英文css字体两端对齐，汉字必须用空格分隔，否则不会有两端对齐的效果。 中文的每个短语之间用空格分隔，所以没有问题。

总结：网上查了很多东西根本没有解决问题。 是我没做对还是真的没效果？ 请问这些回复有亲自测试过吗？ 无论如何，我终于找到了解决办法，所以写在这里作为备忘。 我也希望能给你一些帮助。 欢迎交流。