问答一下,轻松解决,电脑应用解决专家!
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win10/Win11
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascriptLinux系统
PHP教程CSS教程XML教程

怎么用css实现文字占满div垂直高度?

更新时间:2021-08-14 12:27 作者:王峰点击:

此处需要用到两个知识——

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>

注意这个方法对英文不适用

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容