设置兄弟div以取得音频控制元素的宽度

Question

我有一个父div元素和两个嵌套的div元素。第二个子div是任意长度的音频控件。至少我认为这是任意的。我的问题是如何让第一个子div占用音频控件的宽度？

我希望标题只显示在一行上，如果超过所需的宽度则要切断。

我目前有max-width设置为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>