如何让同级div匹配audio控件的宽度

这题我太熟了！你要的效果核心是让父容器自适应audio的宽度，同时让标题容器继承这个宽度，再实现单行截断。之前max-width:100%无效是因为父容器没有明确的宽度参考，下面给你两个靠谱的实现方案：

方案1：用inline-block实现（兼容性好） #

这种方法让父容器收缩包裹住audio的宽度，标题容器直接继承这个宽度，非常直观。

HTML结构 #

<div class="audio-wrapper">
  <div class="audio-title">这是一段很长很长的音频标题，测试超出宽度后自动显示省略号的效果</div>
  <audio controls>
    <source src="demo-audio.mp3" type="audio/mpeg">
  </audio>
</div>

CSS样式 #

.audio-wrapper {
  /* 关键：让父容器只占据内容所需宽度，由audio的宽度决定 */
  display: inline-block;
  /* 可选：防止和其他元素排版错乱，根据需求调整 */
  vertical-align: top;
}

.audio-title {
  /* 继承父容器的宽度（即audio的宽度） */
  width: 100%;
  /* 单行截断核心三属性，缺一不可 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 可选：添加内边距让布局更美观 */
  padding-bottom: 8px;
}

/* 如果你需要自定义audio的宽度，直接在这里设置，父容器会自动适应 */
/* audio {
  width: 350px;
} */

方案2：用Flex布局实现（现代布局方式） #

Flex布局同样能实现这个效果，更适合需要复杂排版的场景：

CSS样式（HTML结构和方案1一致） #

.audio-wrapper {
  display: inline-flex;
  flex-direction: column;
  /* 确保子元素宽度由自身内容决定，audio作为替换元素会使用默认/自定义宽度 */
  align-items: flex-start;
}

.audio-title {
  width: 100%; /* 继承flex容器的宽度，也就是audio的宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 8px;
}

关键原理说明 #

• 父容器使用inline-block或inline-flex，会让它收缩包裹子元素的宽度，而不是占满整行，完美避免过度扩展的问题。
• 标题容器设置width:100%后，会直接继承父容器的宽度（也就是audio的宽度），此时overflow等截断属性就能生效。
• 单行截断的三个属性必须配合使用：white-space: nowrap强制文本不换行，overflow: hidden隐藏超出部分，text-overflow: ellipsis显示省略号。

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