设置同级 div 以采用音频控制元素的宽度

Question

我有一个父div元素和两个嵌套的div元素。第二个子div 是任意长度的音频控件。至少我认为这是任意的。我的问题是我怎样才能让第一个子div 承担音频控件的宽度？

我希望标题只出现在一行上，如果超过所需的宽度，则将其切断。

我目前将最大宽度设置为 100%，我知道这不起作用，因为父div 没有定义的宽度。我不希望父div 扩展到音频控件的宽度之外。

.outer: {
  border: solid black 1px;
  display: inline-block;
  margin: 5px;
  padding: 5px;
}
.audio_text: {
  background-color: #888;
  color: #f00;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap
}

<div class="outer">
   <div class="audio_text">My Title</div>
   <div><audio src="audio.mp3" controls></audio></div>
</div>

如何防止文本导致父div 的大小增加？

Answer 1

你可以尝试这样的事情。这个想法是使标题position:absolute，这样它就不会影响父宽度，并使其拉伸音频标签定义的整个现有宽度。然后使用一些溢出属性，您可以在它很长时将其剪切。

.outer {
  border: 1px solid black;
  display: inline-block;
  margin: 5px;
  padding: 5px;
  position: relative;
}
/* To create the needed space for the title*/
.outer:before {
  content: "A";
  visibility: hidden;
}
/**/
.audio_text {
  position: absolute;
  right: 2px;
  top: 0;
  left: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audio_text: {
  background-color: #888;
  color: #f00;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap
}

<div class="outer">
  <div class="audio_text">My Title</div>
  <div><audio src="audio.mp3" controls></audio></div>
</div>
<div class="outer">
  <div class="audio_text">very very looooooooooooooooooooooooong long Title</div>
  <div><audio src="audio.mp3" controls></audio></div>
</div>
<div class="outer">
  <div class="audio_text">Another long Title</div>
  <div><audio src="audio.mp3" controls style="width:80px;"></audio></div>
</div>

Answer 2

第二个子div 是任意长度的音频控件。至少 我认为这是任意的。

<audio>是一个内联元素，默认宽度在Chrome中似乎300px，在Firefox中270px，在Safari中250px(我目前无法测试IE/Edge(。

有了这些信息，您可以为容器提供固定宽度300px，并为audio提供一个width: 100%。

例。。。

.outer {
  border: solid black 1px;
  width: 300px;
  margin: 5px;
  padding: 5px;
}
audio {
  display: block;
  width: 100%;
}
.audio_text {
  background-color: #888;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="outer">
  <div class="audio_text">My Title My Title My Title My Title My Title My Title</div>
  <div><audio src="audio.mp3" controls></audio></div>
</div>