当使用 writing-mode: vertical-rl 时，浏览器默认按原始块流方向（水平）计算行宽，导致垂直文本实际占用高度远超容器限制而被裁剪；通过 CSS Grid 显式分配空间可强制垂直段落获得合理布局上下文，实现正确换行与自适应。
当使用 `writing-mode: vertical-rl` 时，浏览器默认按原始块流方向（水平）计算行宽，导致垂直文本实际占用高度远超容器限制而被裁剪；通过 css grid 显式分配空间可强制垂直段落获得合理布局上下文，实现正确换行与自适应。
在 Web 排版中，writing-mode: vertical-rl 将文本从上到下、从右向左排列，但其换行行为依赖于块容器的内联尺寸（inline-size）——即对垂直文本而言，换行依据的是容器的 宽度（而非高度）。在你提供的代码中，div 宽 300px、高 200px，而 .vertical-rl 段落默认继承 div 的 width 作为其“行宽”，导致每行最多容纳约 300px 宽度的字符（即单个汉字或字母的水平宽度），但垂直排布后，这些字符堆叠成一列，总高度迅速突破 200px，最终被 overflow: hidden 裁剪。
根本解法是剥离垂直文本对父容器默认块流尺寸的依赖。推荐使用 CSS Grid 布局为 .vertical-rl 元素显式定义可用空间：
div {
position: absolute;
border: 1px dotted red;
left: 10px;
top: 10px;
height: 200px;
width: 300px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr; /* 第一行自适应，第二行占满剩余高度 */
}
p {
font-family: Georgia, serif;
font-size: 18px;
margin: 0; /* 可选：消除默认段落间距，避免布局干扰 */
}
.vertical-rl {
writing-mode: vertical-rl;
color: #0074d9;
text-orientation: mixed; /* 可选：使拉丁字母保持正立，提升可读性 */
}关键点解析：
-
grid-template-rows: auto 1fr确保第一段（水平文本）按内容撑开，第二段（垂直文本）获得剩余全部高度（≈200px − 第一段高度），从而让writing-mode正确将该高度解释为「可用行宽」，触发及时换行； - 避免使用
block-size/inline-size直接设置.vertical-rl尺寸——它们在非 Grid/Flex 上下文中不改变换行基准，反而可能引发嵌套计算异常； - 补充
text-orientation: mixed可显著改善中英混排时的可读性（英文字符自动旋转为 upright）； - 若需更精细控制每行字数，可配合
max-inline-size（如max-inline-size: 150px）进一步约束换行点。
⚠️ 注意事项：
- 不要移除
overflow: hidden后仅依赖height——垂直文本仍会因换行逻辑错误而溢出； - Flexbox 对
writing-mode的支持不如 Grid 稳定（尤其在旧版浏览器中），Grid 是当前最可靠方案； - 如容器需响应式适配，建议用
min-height+grid-template-rows: auto minmax(0, 1fr))防止内容塌陷。
此方案无需 JavaScript，纯 CSS 实现，兼容现代主流浏览器（Chrome 87+、Firefox 60+、Safari 14.1+），是解决垂直文本溢出问题的专业级实践。
