如何在inline-block元素中换行？解决h4垂直居中后文本溢出问题

首先，咱们来拆解你遇到的问题：
你用inline-block实现h4垂直居中时文本不换行，核心原因有两个：

1. inline-block元素的宽度特性：当你把h4设为display: inline-block后，它的默认宽度是收缩包裹内容，不会自动继承父容器的宽度——哪怕文本超长，它也会跟着内容无限延伸，根本不会触发换行逻辑。
2. word-wrap的生效条件：word-wrap: break-word（现在更推荐标准属性overflow-wrap: break-word）需要元素有明确的宽度约束（比如设置了width/max-width，或者被父容器的宽度限制），否则元素没有“边界”，自然不会触发换行。

解决方案一：修复inline-block布局的换行问题 #

如果你坚持用inline-block实现垂直居中，可以按以下步骤调整：

1. 给h4添加宽度约束和换行属性
2. 消除inline-block元素间的空白（避免辅助span和h4之间的空格占用宽度）

修改后的完整代码：

.parent {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin-left: 10px;
  font-size: 0; /* 消除inline-block元素之间的空白间隔 */
}
span {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
h4 {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  font-size: 16px; /* 恢复h4的正常字体大小 */
  max-width: 100%; /* 限制h4最大宽度为父容器宽度 */
  overflow-wrap: break-word; /* 强制换行，包括长单词/无空格文本 */
  box-sizing: border-box; /* 防止内边距/边框超出宽度限制 */
}

解决方案二：改用Flex布局（更简洁可靠） #

如果不需要兼容IE8及以下浏览器，用Flex布局实现垂直居中会更省心，完全不需要辅助元素，还能自动处理文本换行：

.parent {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin-left: 10px;
  display: flex;
  align-items: center; /* 一键实现垂直居中 */
}
h4 {
  margin: 0;
  overflow-wrap: break-word; /* 处理长文本换行 */
}

这种方法下，h4会自动填充父容器的可用宽度，文本超出时自然换行，代码也更简洁易维护。

补充说明 #

你提到的word-wrap之前无效，本质是因为h4没有宽度限制——它的宽度会跟着内容无限扩展，不存在“溢出父容器”的情况，所以换行属性根本没有触发的机会。只要给h4加上max-width: 100%（或固定宽度），再配合overflow-wrap: break-word，就能解决换行问题。

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