如何通过CSS在纵向展示时处理文字溢出并显示省略号？

在网页排版里，横向文字溢出显示省略号已经是老生常谈，但一旦把书写方向改为纵向，很多开发者熟悉的套路就失灵了。纵向展示常见于古诗词、日文竖排或者一些创意海报页面，核心是通过CSS的writing-mode把文字主轴转到垂直方向。此时如果容器高度固定而内容过长，浏览器并不会自动帮你截断，也不会凭空出现省略号，需要重新理解截断与省略的生效条件。

纵向排版的底层机制

CSS中的writing-mode属性决定了文本行内方向和块级流向。常用的值包括horizontal-tb（默认横向）、vertical-rl（右到左竖排）和vertical-lr（左到右竖排）。当设置为vertical-rl时，文字沿着垂直轴排列，原本的“宽度”概念变成了“高度”概念，因此溢出发生的边界从右边框转移到了下边框。

标准单行省略号依赖三个声明：overflow隐藏、white-space禁止换行、text-overflow指定省略符。但这套组合仅在书写模式为horizontal-tb且溢出发生在行末时有效。纵向模式下，white-space:nowrap阻止的是横向换行，对垂直方向的多行堆叠无能为力，所以必须换用限制块级数量的思路，例如固定容器高度配合overflow:hidden，再手动补充省略提示。

使用WebKit私有属性快速实现

在WebKit内核浏览器中，可以沿用类似横向的思路，将text-overflow:ellipsis与特定的书写模式结合。不过需要注意，单纯设置writing-mode并不能让text-overflow自动识别纵向溢出，通常还要限制行数或使用旧版私有属性-webkit-line-clamp的变体。下面是一段在纵向左到右模式下截断单列的示例：

.container {
  writing-mode: vertical-lr;
  height: 200px;
  width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

上面代码在部分浏览器中可以让超长竖排文本在底部被裁切，但由于text-overflow规范并未强制要求纵向支持，实际表现不一致。它的优点是写法简单，缺点是与标准脱节，在Firefox或旧版Edge上可能完全不显示省略号，只做生硬截断。

如果你面对的是内部系统或仅需兼容Chrome环境，这种写法能节省大量布局代码。但面向公众的站点，建议将其作为渐进增强，而非唯一方案，避免用户在不同浏览器看到差异明显的版式。

通用且稳定的伪元素方案

为了跨浏览器一致，更推荐用容器固定高度配合overflow:hidden，然后在末尾用伪元素覆盖一个渐变或写死省略符。思路是：纵向容器只显示固定高度，超出的内容不可见，同时在最下方放置一个带背景色的小块，模拟“更多”或“…”的视觉信号。

<div class="vertical-box">
  <span class="text">春眠不觉晓处处闻啼鸟夜来风雨声花落知多少</span>
</div>

.vertical-box {
  writing-mode: vertical-rl;
  height: 160px;
  width: 32px;
  overflow: hidden;
  position: relative;
  background: #fff;
}
.vertical-box .text {
  font-size: 16px;
  line-height: 1.4;
}
.vertical-box::after {
  content: "…";
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  padding: 2px 0;
}

这段代码的要点在于伪元素::after用绝对定位钉在容器右下角，并赋予与背景相同的颜色，遮住被裁切的文字末端，同时显示中文省略号。由于是纯CSS绘制，不依赖浏览器对text-overflow的纵向支持，在各大引擎中表现统一。

该方案的灵活之处在于你可以把content换成“详情”或箭头图标，甚至用linear-gradient做出淡出效果。代价是省略符位置需要微调，且在动态字体加载时可能错位，因此建议在字体就绪后再渲染竖排区域，或预留足够padding避免文字直接贴边。

对比与选型建议

我们把两种思路放在一张表里看差异：

从维护成本看，伪元素方案虽多几行样式，但免去了后期因浏览器升级导致表现漂移的风险。若产品明确只跑在嵌入式WebView里，私有属性能加快开发；若涉及SEO或多端投放，通用方案更稳妥。

最后提醒，纵向溢出处理本质是把“行”的概念转为“列”，因此测量容器高度时要以字符堆叠后的实际占用为准。用JS动态计算时，可读取getBoundingClientRect而非依赖固定像素，能更好适配移动端字体缩放。

CSStext-overflowwriting-mode修改时间：2026-08-03 17:09:57