|
此处需要用到两个知识—— text-align: justify 可以使文字充满容器对齐，但是注意：最后一行/列不会向两端对齐，我们可以通过 ::after 伪元素在最后增加一个看不见的行/列来解决。（感谢题主补充，也可以通过 text-align-last: justify 来解决，这个方案无需结合伪元素，推荐） 2、想要让文字垂直对齐，我们可以通过修改文字书写方向来实现：writing-mode: vertical-rl。 CSS 代码如下 .economicIndicator__title {
width: 20px;
height: 60px;
writing-mode: vertical-rl;
/* 推荐方案：使用 text-align-last */
text-align-last: justify;
/* 方案二：使用 text-align，需结合伪元素 */
text-align: justify;
}
/* 方案二补充：利用伪元素在后面增加一个看不见的“列”，使用推荐方案无需以下代码 */
.economicIndicator__title::after {
content: '';
display: inline-block;
height: 100%;
}
html 代码就简单多了 <div class="economicIndicator__title">收率</div>
注意这个方法对英文不适用
|
