在网页设计中，文本的排版是至关重要的。有时，我们需要将文本以竖直方向排列，并且当文本内容超出容器大小时，能够进行适当的溢出处理。CSS 提供了多种方法来实现这一功能，以下是一些常用的技巧和代码示例。
1. 使用
writing-mode
属性
writing-mode
属性允许你控制文本的方向和书写顺序。通过设置
writing-mode
为
vertical-lr
或
vertical-rl
，可以使文本竖排。同时，结合
overflow
属性可以处理文本溢出问题。
.vertical-text {
writing-mode: vertical-lr; /* 从上到下 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
HTML 示例：
2. 使用
display: flex
和
align-items: flex-start
当需要处理多行文本的竖排溢出时，可以使用 Flexbox 布局。通过设置
display: flex
和
align-items: flex-start
，可以使文本从顶部开始竖排排列。
.flex-vertical {
display: flex;
flex-direction: column;
align-items: flex-start;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
HTML 示例：
3. 使用
text-orientation
和
block-orientation
对于一些需要考虑文本方向的语言，如阿拉伯语或希伯来语，可以使用
text-orientation
和
block-orientation
属性来控制文本的方向。
.arabic-text {
writing-mode: vertical-lr;
text-orientation: mixed;
block-orientation: mixed;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
HTML 示例：
4. 使用
line-clamp
属性
line-clamp
属性允许你限制文本的行数，当超出指定行数时，会显示省略号。这适用于单行或少数几行的文本溢出处理。
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 2; /* 限制显示2行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
HTML 示例：
通过以上方法，你可以轻松地处理网页设计中竖排文本的溢出问题。在实际应用中，可以根据具体需求和设计风格选择合适的方法。