一、要实现的效果:
二、代码
要在CSS中设置文本在一个固定宽度的容器中等距分开,
可以使用text-align: justify;属性,它可以让文本两端对齐,看起来就像是等距分开的。
但是要注意,单独使用text-align:justify;只能对单行文本进行处理,多行文本需要额外的设置。
<div class="lef_tit">标题:</div>
<div class="lef_tit">封面图片:</div>
<style>
.lef_tit {
width: 88px;
/* 设置文本两端对齐 */
text-align: justify;
/* 为了等距分开,设置词间距调整方式 */
text-justify: inter-word;
}
.lef_tit:after {
content: '';
display: inline-block;
width: 100%;
/* 设置伪元素宽度为100%,使得最后一行左对齐 */
}
</style>
完成~