js文字两端对齐

news2025/4/2 6:54:21

一、问题

二、原因及解决方法

三、总结

一、问题

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>