目录
一、问题
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>
三、总结
1.单行文字两端对齐：设置 text-align-last:justify
2.多行文字中的一部分对齐：设置 text-align:justify; text-align-last:justify;同时要设置 固定的宽度，保持两端对齐的效果一致。
/*
希望对你有帮助！
如有错误，欢迎指正！
*/