实现文案两端对齐 css 有属性

1
2
text-align: justify;
text-justify: inter-ideograph;

但是，写上并没有什么卵用。
原因是justify对最后一行无效

1
2
3
<div class="wrap">
  <span class="text-align-jutify">项目周期：</span>
</div>

实现方式 1

所以需要在其加个伪类。实现代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.wrap {
  height: 40px;
}
.text-align-jutify {
  display: inline-block; // display: block;
  height: 100%;
  overflow: hidden;
  text-align: justify;
  text-justify: inter-ideograph;
  vertical-align: top;
  width: 4em;
  &::after {
    content: '';
    display: inline-block;
    height: 0;
    width: 100%;
  }
}

实现方式 2

有个 css 属性text-align-last:一段文本中最后一行在被强制换行之前的对齐规则。
但是此属性兼容性有点差 caniuse

1
2
3
4
5
6
7
8
9
.wrap {
  height: 40px;
}
.text-align-jutify {
  display: inline-block; // display: block;
  width: 4em;
  text-align: justify;
  text-align-last: justify;
}