在网页布局中，纵向排列的文字如果内容过长超出容器高度，需要添加省略号来提示用户还有更多内容，这和横向文字溢出的处理逻辑有相似之处，但也有专属的属性配置要求。
核心实现原理
纵向文字溢出省略号的核心逻辑是：先让文字按纵向排列，再限制容器的高度，最后设置溢出内容隐藏并添加省略号。需要用到以下几个关键CSS属性：
- writing-mode：控制文字的排列方向，设置为
vertical-rl或vertical-lr可实现纵向排列 - text-overflow：设置溢出内容的显示方式，值为
ellipsis时显示省略号 - overflow：控制溢出内容的处理方式，需要设置为
hidden隐藏超出部分 - display：需要将容器设置为
-webkit-box等弹性盒模型相关值，配合其他属性生效
完整实现代码示例
以下是一个可直接使用的纵向文字溢出省略号实现代码，容器高度固定为120px，最多显示3行纵向文字：
/* 纵向文字容器样式 */
.vertical-text-container {
/* 设置纵向排列，从右到左排列文字 */
writing-mode: vertical-rl;
/* 兼容旧版语法 */
-webkit-writing-mode: vertical-rl;
/* 固定容器高度，限制显示范围 */
height: 120px;
/* 隐藏超出容器的内容 */
overflow: hidden;
/* 设置溢出显示省略号 */
text-overflow: ellipsis;
/* 弹性盒模型配置，用于限制显示行数 */
display: -webkit-box;
/* 设置纵向排列下的显示行数，这里为3行 */
-webkit-line-clamp: 3;
/* 设置盒子的排列方向为纵向 */
-webkit-box-orient: vertical;
/* 可选：设置文字间距，提升纵向阅读体验 */
letter-spacing: 2px;
/* 容器宽度根据文字大小调整 */
width: 24px;
font-size: 16px;
line-height: 24px;
border: 1px solid #e5e5e5;
padding: 8px;
}
对应的HTML结构如下：
<div class="vertical-text-container">
这是一段用于测试纵向文字溢出省略号效果的示例文本，当文字内容超出容器设定的高度范围时，末尾会自动显示省略号提示用户还有更多内容未展示
</div>
浏览器兼容性说明
上述代码中的-webkit-line-clamp和-webkit-box-orient属于WebKit内核的私有属性，在Chrome、Edge、Safari等基于WebKit或Blink内核的浏览器中都可以正常生效。如果是Firefox浏览器，可以使用以下替代方案：
/* Firefox兼容方案 */
.vertical-text-container-firefox {
writing-mode: vertical-rl;
height: 120px;
overflow: hidden;
/* Firefox支持标准语法 */
text-overflow: ellipsis;
/* 使用标准弹性盒模型 */
display: flex;
flex-direction: column;
width: 24px;
font-size: 16px;
line-height: 24px;
border: 1px solid #e5e5e5;
padding: 8px;
}
/* 通过伪元素模拟省略号 */
.vertical-text-container-firefox::after {
content: "...";
position: absolute;
bottom: 8px;
right: 0;
background: linear-gradient(to bottom, transparent, #fff 50%);
padding-left: 2px;
}
注意事项
在实际使用中需要注意以下几点：
- 容器的
writing-mode设置后，宽度和高度的作用会互换，需要根据文字排列方向调整容器的宽高值 -webkit-line-clamp的值需要和容器的高度、文字行高匹配，避免出现省略号不显示或者显示位置异常的问题- 如果文字内容包含英文单词，纵向排列时可能会出现单词被截断的情况，可以通过
word-break: break-all属性调整换行规则
如果业务中需要兼容非常旧的浏览器版本，建议优先使用JavaScript计算文字高度的方式实现省略号，避免CSS属性兼容问题导致效果异常。