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

原创已于 2022-11-15 15:30:22 修改 · 2.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS

当前文章被收录于：

CSS

4 篇文章 0 人学习

css学习记录

订阅专栏查看详情

当前文章被以下社区和专栏收录：

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

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

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;
        }
      }