css 文字竖排换行 |css3草地

/* 将文字竖排 */
.text {
writing-mode: vertical-lr;
text-orientation: upright;
}
/* 调整换行方式 */
.text {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分用省略号表示 */
}
/* 设置文字间距 */
.text {
letter-spacing: 1em; /* 设置字间距 */
word-spacing: 0.5em; /* 设置词间距 */
}

以上代码中，writing-mode属性用于定义文字的竖排方式，其中vertical-lr表示从上到下排列。text-orientation属性用于定义文字的方向，其中upright表示竖直方向。

为避免文字竖排出现换行，大家可以使用white-space属性禁止自动换行，并使用overflow和text-overflow属性对溢出部分进行控制。同时，通过设置letter-spacing和word-spacing属性，可以调整文字的间距，使其更加美观。

需要注意的是，CSS中文字竖排的应用范围较为有限，通常仅用于一些特殊场合，如东亚文字书写等。因此，在使用文字竖排时要注意其适用范围，避免出现不必要的问题。