css文字纵列换行 |css div 文字间距

大家重点讲述的是“vertical-lr”这一取值。该取值表示文本从上往下排列，如同日语或韩语一样。当使用这一取值时，大家会遇到一个问题：当一行文本太长时，会超出容器的可见范围。此时，大家需要让文本发生纵列换行，以免超出容器。

.container {
height: 300px;/*容器高度*/
width: 150px;/*容器宽度*/
writing-mode: vertical-rl;/*从上到下排列*/
overflow: hidden;/*超出范围隐藏*/
white-space: nowrap;/*不允许文字自动换行*/
}
.text {
writing-mode: horizontal-tb;/*从左到右排列*/
text-orientation: upright;/*竖直排列*/
transform: rotate(-180deg);/*翻转文本*/
}

上面给出的代码中，大家首先设置容器的高度、宽度和排列方式。由于“vertical-lr”排列方式会导致文本超出范围，因此大家设置了“overflow: hidden;”属性，将超出的部分隐藏。但是，大家需要让文本发生纵列换行，以免超出容器。为了做到这一点，大家需要给文本设置“writing-mode:horizontal-tb;”，将其从上到下排列、从左到右展示。但是，“horizontal-tb”排列方式下的文本又会让其文字逆向排列。因此，大家需要使用“text-orientation:upright;”将竖直排列，再使用“transform:rotate(-180deg);”将其翻转180度，让其正向排列。

通过以上方式，大家成功地解决了在CSS中实现纵列换行的问题。