你知道如何让单行文本两端对齐吗？

前言

最近在做一个项目，其中有一个这样的UI设计页面：

UI要求：

1. 左侧文本是两端对齐
2. 在对这个页面进行截图保存时，样式正常。

实现

我们都知道，既然是对文本进行对齐，那么就绕不开text-align属性。

可以看到，有个justify属性实现文本的两端对齐。

那我们来试试吧~

<div class="row">
   <div class="label">
       地址
   </div>
   <div class="colon">：</div>
   <div class="value">地址</div>
</div>

.label {
  text-align: justify;
}

效果图：

text-align：justify;只对多行文本生效。 并且text-align不会对文本的最后一行起作用，因此最后一行依旧左对齐。单行文本的段落不会实现效果，因为单行文本既是第一行，也是最后一行。

那就使用伪元素after创建一个空行，这样单行文本也可以实现两端对齐了。

.label {
  text-align: justify;
  
  /* 隐藏空行 */
  height: 20px;
  overflow: hidden;
  &::after {
     display: inline-block;
     width: 100%;
     content: "";
  }
}

效果图；

这样就实现了单行文本的两端对齐。

意外总会发生，事情不会一直按照我们设想好的去执行。

文本的两端对齐是实现了，但在对页面进行截图保存图片时，问题出现了。看下图:

文本两端对齐样式错乱了，由于截图是使用html2canvas插件实现的，这个插件对一些样式属性不支持。故而只能寻求其他对齐方式了。

两端对齐最普遍的一种实现方式是flex布局，但是它只能对伸缩项目进行两端对齐。对文本时无效的。

只能秀一下骚操作了~

<div class="row">
   <div class="label">
      <span>地</span>
      <span>址</span>
   </div>
   <div class="colon">：</div>
   <div class="value">地址</div>
</div>

.label {
 display: flex;
 justify-content: space-between;
}

效果图：

也实现了，但这个只能一个字一个字的拆分，再用span标签包裹起来。

再看下截图保存的效果：

截图的图片，样式正常了。

虽然是个笨办法，但也能实现我的需求了。

后记

记录一下项目中比较有意思的实现，对于单行文本的两端对齐方式，欢迎大家一起进行探讨，有更好的实现方式欢迎大家评论区留言哈~