如何精简HTML5 Audio控件：去除三点右侧多余区域

要去除三点（调速按钮）右侧的多余空白/占位区域，在你现有CSS基础上补充以下规则即可（针对Chrome、Edge、Safari等WebKit内核浏览器）：

audio {
  width: 90px; /* 缩小宽度适配精简后的控件，避免多余留白 */
}

/* 你原有的隐藏规则 */
audio::-webkit-media-controls-volume-slider {
  display: none !important;
}
audio::-webkit-media-controls-timeline-container {
  display: none !important;
}
audio::-webkit-media-controls-time-remaining-display {
  display: none !important;
}
audio::-webkit-media-controls-timeline {
  display: none !important;
}

/* 新增：隐藏当前时间显示，避免占位 */
audio::-webkit-media-controls-current-time-display {
  display: none !important;
}

/* 新增：隐藏音量控制容器（仅隐藏滑块时容器仍会占宽度） */
audio::-webkit-media-controls-volume-control-container {
  display: none !important;
}

/* 新增：隐藏全屏按钮（如果不需要） */
audio::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

/* 关键：裁剪控件容器的多余空白 */
audio::-webkit-media-controls-controls-enclosure {
  overflow: hidden !important;
}

你的HTML代码可以保持不变：

Text before the play button
<audio oncontextmenu="return false;" controls controlslist="nodownload" name="media">  
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

说明 #

• 缩小audio标签的宽度，适配仅保留播放/暂停+三点按钮的布局；
• 补充隐藏时间显示、音量容器等可能产生占位的元素；
• 通过controls-enclosure的overflow: hidden裁剪控件内部的冗余空白区域。

注意：以上规则仅对WebKit/Blink内核浏览器生效，Firefox等其他浏览器的控件样式需单独适配，但已覆盖绝大多数主流现代浏览器场景。

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