writing-mode:vertical-rl文本溢出DIV问题解决方案求助

问题本质 #

当给元素设置writing-mode: vertical-rl后，文本的“行”变为垂直方向，行的长度对应元素的block-size（对应原布局的height）。如果这个block-size继承了容器的宽度（容器宽>高），就会导致垂直行的长度超过容器的高度，文本溢出。

具体解决方案 #

给设置了vertical-rl的<p>标签添加以下样式，约束垂直行的长度不超过容器高度，同时让文本在水平方向自动换行：

1. 确保容器有明确的宽高值（比如width: 400px; height: 200px;）
2. 给垂直文本的<p>设置：

.vertical-text {
  writing-mode: vertical-rl;
  /* 限制垂直行的长度等于容器高度，避免单行溢出 */
  block-size: 100%;
  /* 允许文本在水平方向自动换行 */
  inline-size: auto;
  /* 强制长文本拆分换行，防止单个超长内容溢出 */
  overflow-wrap: break-word;
  /* 消除默认边距，避免额外溢出 */
  margin: 0;
}

完整示例代码 #

<div class="container">
  <p>普通水平文本</p>
  <p class="vertical-text">这是一段很长的垂直文本，设置writing-mode:vertical-rl后，需要让它在容器高度范围内自动换行，避免内容被截断，现在测试这段文本是否能正常显示不溢出。</p>
</div>

<style>
.container {
  width: 400px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

.vertical-text {
  writing-mode: vertical-rl;
  block-size: 100%;
  inline-size: auto;
  overflow-wrap: break-word;
  margin: 0;
}
</style>

补充说明 #

• block-size: 100%：让垂直行的长度等于容器高度，确保单行垂直文本不会超出容器的垂直空间。
• inline-size: auto：让元素在水平方向自动适应换行后的内容宽度，不会强行撑满容器宽度。
• 如果希望水平方向的内容也不超出容器宽度，可将inline-size: auto改为inline-size: 100%，超出容器宽度的内容会继续换行。

内容的提问来源于stack exchange，提问作者Andrew Foulds