本文详解如何在 writing-mode: vertical-lr（垂直文本）场景下，同时实现容器内文本的垂直/水平居中对齐与溢出时的 text-overflow: ellipsis 截断，解决 Flex 容器中 align-items 与截断失效的常见冲突。
本文详解如何在 `writing-mode: vertical-lr`（垂直文本）场景下，同时实现容器内文本的垂直/水平居中对齐与溢出时的 `text-overflow: ellipsis` 截断，解决 flex 容器中 `align-items` 与截断失效的常见冲突。
在构建类“书脊”（book spine）的垂直文字组件时，开发者常陷入一个典型矛盾：使用 display: flex 可轻松实现内容居中（通过 align-items: center 和 justify-content: center），但垂直方向的单行文本截断（ellipsis）却意外失效；而切换为 display: block 虽能触发 text-overflow: ellipsis，却丧失了可靠的居中能力。
根本原因在于：text-overflow: ellipsis 的生效需同时满足三个条件——
✅ white-space: nowrap（强制单行）
✅ overflow: hidden（隐藏溢出）
✅ width 或 max-width 明确限制（对块级元素有效）
但当元素为 display: flex 且内部仅含纯文本节点时，Flex 容器会将文本视为匿名 flex 项（anonymous flex item），其尺寸不受 width 直接约束，导致截断逻辑无法正确计算边界。此时 align-items: center 控制的是该匿名项的交叉轴对齐，而非文本自身的渲染流。
✅ 正确解法：不依赖 align-items，改用 text-align: center + line-height 或 flex 内嵌包装层
推荐采用更稳健、语义清晰的方案——保留 display: flex 以维持布局可控性，但将文本包裹在一层 inline-block 或 block 子元素中，并在子元素上应用截断与居中样式：
.book-spine {
width: 45px;
height: 150px;
margin-right: 1px;
background-color: #a0522d;
color: white;
display: flex;
justify-content: center; /* 水平居中（主轴） */
align-items: center; /* 垂直居中（交叉轴）——此处有效，因子元素有明确尺寸 */
writing-mode: vertical-lr;
transform: rotate(180deg);
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.book-spine > span {
display: inline-block;
text-align: center; /* 垂直书写模式下，text-align 控制的是“行内”方向（即原水平方向），等效于水平居中 */
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* 可选：微调行高确保视觉居中更精准 */
line-height: 1.2;
}<div class="shelf">
<div class="book-spine">
<span>Sample title that is far too long to fit on a narrow book spine</span>
</div>
</div>⚠️ 注意事项：
-
writing-mode: vertical-lr下，text-align: center作用于“行内方向”，即让文字在容器宽度范围内水平居中（视觉上表现为沿书脊长度方向居中），这是关键认知点； - 避免滥用
align-content: center（如答案中所提）——它仅对多行 Flex 容器生效，单行时无效果，且对文本截断无实质帮助； -
transform: rotate(180deg)用于翻转文字朝向，不影响截断逻辑，但需确保旋转后容器尺寸仍覆盖内容区域； - 在响应式环境中，建议为
.book-spine > span设置font-size: clamp(0.7rem, 2.5vw, 0.9rem)，使文字随书脊宽度自适应缩放，进一步提升截断合理性。
总结：垂直文本的居中+截断不是 CSS 的“缺陷”，而是对 writing-mode 与布局模型理解的考验。核心原则是——将截断逻辑落实到具有明确盒模型边界的内联级元素上，再用 Flex 容器负责宏观定位。这一模式兼顾可维护性、浏览器兼容性（Chrome/Firefox/Safari 均支持）与设计精度，是构建专业级垂直标签、书脊、侧边导航栏的理想实践。
