js文字两端对齐

目录

一、问题

二、原因及解决方法

三、总结


一、问题

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

二、原因及解决方法

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

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

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

3.具体示例如下:

html 复制代码
<!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.优化,上面的例子中 冒号也会在 两端对齐中产生影响:为了使所有文字两端对齐,可以把文字和冒号分开在不同的容器中

具体代码如下:

html 复制代码
<!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;同时要设置 固定的宽度,保持两端对齐的效果一致。

/*

希望对你有帮助!

如有错误,欢迎指正!

*/

相关推荐
拾光拾趣录1 分钟前
Flexbox 布局:从“垂直居中都搞不定”到写出响应式万能布局
前端·css
渣渣盟13 分钟前
JavaScript核心概念全解析
开发语言·javascript·es6
huxihua200641 分钟前
各种前端框架界面
前端
拾光拾趣录41 分钟前
GET/POST 的区别:从“为什么登录请求不能用 GET”说起
前端·网络协议
Carlos_sam1 小时前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录1 小时前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录1 小时前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区2 小时前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠2 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞2 小时前
mybatis 差异更新法
java·前端·mybatis