单行文本两端对齐草稿

# 背景

想要实现如下文字排版：

姓   名
身 份 证
电话号码

1
2
3

上面这个排期对的不是很齐可以看这个网址看效果 =》 https://iggfz6.csb.app/

# 实现

在线调试： https://codesandbox.io/s/text-align-justify-iggfz6?file=/src/styles.scss

核心代码

&__name {
      display: inline-block;
      min-width: 48px;
      // 实现单行文本两端对齐
      text-align-last: justify;
      text-align: justify;
      // 兼容ie浏览器
      text-justify: distribute-all-lines;
      // 兼容 safari：增加一个块元素使得 text-align 生效，并设置 hidden 避免占位
      height: 16px;
      overflow: hidden;
      &::after {
        content: '';
        width: 100%;
        display: inline-block;
      }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 参考

https://zhuanlan.zhihu.com/p/53428937

编辑

上次更新: 2023/08/26, 10:18:07

← inline-block空内容最小高度的问题响应式卡片分页→