如何让span文本先填满div可用高度再扩展宽度？

可以通过结合Flex布局的特性实现你要的效果，核心是让第二个span被限制在第一个span定义的高度内，优先换行填满高度，再扩展宽度。

实现代码 #

<div class="container">
  <span class="large-text">123</span>
  <span class="wrap-content">这是一段需要先换行填满高度再扩展宽度的文本内容，测试测试测试测试测试测试测试测试测试测试</span>
</div>

.container {
  display: flex;
  gap: 10px; /* 两个元素间的间距，可根据需求调整 */
}

.large-text {
  font-size: 48px; /* 大字号，决定父容器高度 */
}

.wrap-content {
  height: 100%; /* 强制继承父容器高度，也就是第一个span的高度 */
  min-width: 12ch; /* 设置最小宽度，避免过度收缩 */
  flex: 1; /* 允许在高度用尽后自动扩展宽度 */
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* 内容从顶部开始排列 */
  word-break: break-all; /* 确保长文本/单词能正常换行 */
}

关键逻辑说明 #

1. 父容器布局：display: flex让两个span横向排列，同时父容器的高度会被第一个大字号的span自动撑开。
2. 高度限制：给第二个span设置height: 100%，强制它的高度和父容器一致，与第一个span的高度绑定。
3. 换行优先：第二个span内部用flex-wrap: wrap让内容自动换行，填满可用高度；align-content: flex-start保证内容从顶部开始排列，不会居中或拉伸。
4. 宽度扩展：min-width保证元素不会缩得太窄，flex: 1让它在内容超出高度限制后，自动扩展宽度容纳剩余内容。

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