Html 将同级div设置为具有音频控制元素的宽度

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

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

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

。外部：{
边框：纯黑1px；
显示：内联块；
保证金：5px；
填充物：5px；
}
.音频文本：{
背景色：#888；
颜色：#f00；
最大宽度：100%；
溢出：隐藏；
空白：nowrap
}

我的头衔

您可以尝试这样的方法。这样做的目的是使title

position:absolute

，这样它就不会影响父级宽度，并且可以使其拉伸音频标记定义的整个现有宽度。然后，使用一些溢出属性，当它很长时，您将其剪切

.outer{
边框：1px纯黑；
显示：内联块；
保证金：5px；
填充物：5px；
位置：相对位置；
}
/*为标题创建所需的空间*/
.外：以前{
内容：“A”；
可见性：隐藏；
}
/**/
.音频文本{
位置：绝对位置；
右：2px；
排名：0；
左：2px；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.音频文本：{
背景色：#888；
颜色：#f00；
最大宽度：100%；
溢出：隐藏；
空白：nowrap
}

我的头衔
很长很长的标题
又一个长标题

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

是一个内联元素，在Chrome中默认宽度为

300px

，在Firefox中默认宽度为

270px

，在Safari中默认宽度为

250px

（目前我无法测试IE/Edge）

有了这些信息，您可以给容器一个固定的宽度

300px

，给

音频

一个

宽度：100%

例如

.outer{
边框：纯黑1px；
宽度：300px；
保证金：5px；
填充物：5px；
}
音频{
显示：块；
宽度：100%；
}
.音频文本{
背景色：#888；
颜色：#fff；
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}

我的头衔我的头衔我的头衔我的头衔我的头衔我的头衔