这种效果主要通过text-align-last属性来实现。text-align-last：规定如何对齐文本的最后一行，当文本只有一行的时候，text-align属性不设置，text-align-last也是有用的。当然这只是针对非IE和Safiri而言。
解析
-
text-align-last：规定如何对齐文本的最后一行
text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。
/*css*/
.label {
width: 200px;
text-align-last: justify;
}
/*html*/
<div class="label">产 品</div>
/*css*/
.label {
width: 200px;
height: 30px; /*高度需要添加，不然文字下面会多出一些空隙*/
text-align: justify;
}
.label:after{
content: '';
display: inline-block;
width: 100%;
}
/*html*/
<div class="label">产 品</div>
-
因为加了伪类之后，相当于在标签的文本后又加了一行，所以text-align-last就不起作用了，需要加上text-align
-
因为加了伪类之后，文本后面会多出一行，即使给伪类设置高度为0也不行。所以必须给.label属性加上一个高度。区别如下：
-
加了伪类之后，标签的文字之间必须要存在一个空格（一个就行，不用太多），否则的话，没有效果。
两种方案对比
服务热线 19970861797
