text-align如何实现两端对齐(兼容IOS版)

Echo-潔

已于 2022-11-15 15:30:22 修改

阅读量2.1k

点赞数

分类专栏： CSS 文章标签：前端

于 2022-04-12 19:04:14 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44094296/article/details/124131489

版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在不支持IOS的条件下，通过CSS技巧（`.label_name`类）实现文本两端对齐，包括使用伪类和inline-block属性。适合前端开发者了解移动端兼容性问题的解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

text-align-last：justify可实现文字两端对齐（不兼容IOS），具体看如下图：

在这里插入图片描述

实现 IOS 文字两端对齐： 实现原理为：使用伪类使该元素不为最后一行

     .label_name {
        min-width: 140rpx;
        text-align: justify;
        display: inline-block;
        text-align-last: justify;
        vertical-align: top;
        &:after {
          display: inline-block;
          content: '';
          overflow: hidden;
          width: 100%;
          height: 0;
        }
      }