前端左侧标题不同字数对齐的方法

• 背景：有时会遇到下面这种问题，不同字数作为标题需要进行对齐，我们可能会想到使用 进行操作对齐，但这种方式总是不完美的。
  
  解决方式：
  方式一：
  每个标题后面加一对span标签
  span标签设置css样式

display: inline-block;
padding-left: 100%;

标题的css样式设置

text-align: justify;

这样就可以实现标题不同数量文字对齐了，具体代码如下

<!-- 结构部分 -->
<view class="detail-item flex">
    <image src="../../../static/grey-user.png" class="detail-item-icon"></image>
    <view class="detail-item-title">联系人<span></span></view>
    <view class="mao-hao">：</view>
    <view class="detail-item-text"> 联系人</view>
</view>
<view class="detail-item flex">
    <image src="../../../static/grey-tel.png" class="detail-item-icon"></image>
    <view class="detail-item-title">联系电话<span></span></view>
    <view class="mao-hao">：</view>
    <view class="detail-item-text">联系电话</view>
</view>

<!-- 样式部分 -->
.detail-item-title {
    
    
	width: 140upx;
	height: 38upx;
	// margin-right: 16upx;
	color: #686B73;
	text-align: justify; // 关键
	// 关键 
	span {
    
    
		display: inline-block;
		padding-left: 100%;
	}
}

方式二
也可以不用span标签，直接用::after伪元素

<!-- 结构部分 -->
<view class="detail-item flex">
    <image src="../../../static/grey-user.png" class="detail-item-icon"></image>
    <view class="detail-item-title">联系人</view>
    <view class="mao-hao">：</view>
    <view class="detail-item-text"> 联系人</view>
</view>
<view class="detail-item flex">
    <image src="../../../static/grey-tel.png" class="detail-item-icon"></image>
    <view class="detail-item-title">联系电话</view>
    <view class="mao-hao">：</view>
    <view class="detail-item-text">联系电话</view>
</view>

<!-- 样式部分 -->
.detail-item-title {
    
    
	width: 140upx;
	height: 38upx;
	// margin-right: 16upx;
	color: #686B73;
	text-align: justify; // 关键
	&::after {
    
    
		content:'';
		width: 100%;
		display: inline-block;
		height: 0;
	}
}