js文字两端对齐

一、问题

二、原因及解决方法

三、总结

一、问题

1.text-align: justify; 不就可以了吗？但是实际测试无效

二、原因及解决方法

1.原因：text-align只对非最后一行文字有效。只有一行文字时，text-align无效，要用text-align-last:justify

2.对于多行不同div中的文字需要在视觉上两端对齐：还需要对所有的div设置合适的width,以便统一实现两端对齐的效果。

width:100px;(根据需要设置能够显示下所有的字符/固定值)
text-align: justify;
text-align-last: justify;

3.具体示例如下：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Text Align Example</title><style>.box {border: 1px solid #ccc;padding: 10px;}.justify {text-align: justify;text-align-last: justify;}ul > li > span {display: inline-block;width: 100px;text-align: justify;text-align-last: justify;}</style></head><body><div class="box"><p class="justify">这是一段测试文字，用于演示 text-align: justify 和 text-align-last: justify 的效果。这段文字会被两端对齐，包括最后一行。</p><h3>下面的标签(商品名称，商品保质期，产地)两端对齐</h3><ul><li><span>商品名称：</span><span>猕猴桃</span></li><li><span>商品保质期：</span><span>5天</span></li><li><span>产地：</span><span>陕西省宝鸡市</span></li></ul></div></body>
</html>

4.优化，上面的例子中冒号也会在两端对齐中产生影响：为了使所有文字两端对齐，可以把文字和冒号分开在不同的容器中

具体代码如下：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Text Align Example</title><style>.box {border: 1px solid #ccc;padding: 10px;}.justify {text-align: justify;text-align-last: justify;}ul > li > span {display: inline-block;width: 115px;text-align: justify;text-align-last: justify;}</style></head><body><div class="box"><p class="justify">这是一段测试文字，用于演示 text-align: justify 和 text-align-last: justify 的效果。这段文字会被两端对齐，包括最后一行。</p><h3>下面的标签(商品名称，商品保质期，产地)两端对齐</h3><ul><li><span>商品名称：</span><span>猕猴桃</span></li><li><span>商品保质期：</span><span>5天</span></li><li><span>产地：</span><span>陕西省宝鸡市</span></li></ul><h3>优化版</h3><ul><li><span>商品名称</span><span>：猕猴桃</span></li><li><span>商品保质期</span><span>：5天</span></li><li><span>产地</span><span>：陕西省宝鸡市</span></li></ul></div></body>
</html>