HTML 播放器 UI 改良：歌曲标题显示省略号

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>播放器</title><style>.player{display:flex;align-items:center;width:400px;height:50px;background-color:#f0f0f0;border-radius:5px;padding:10px;}.play-button,.pause-button{cursor:pointer;width:30px;height:30px;border-radius:50%;background-color:#333;margin-right:10px;}.play-button::before,.pause-button::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;}.play-button::before{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:15px solid #fff;}.pause-button::before{width:4px;height:12px;background-color:#fff;}.song-title{flex-grow:1;font-size:16px;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}</style></head><body><div class="player"><div class="play-button"></div><div class="song-title">歌曲标题</div><div class="pause-button"></div></div><script>var playButton=document.querySelector('.play-button');var pauseButton=document.querySelector('.pause-button');var audio=new Audio('https://ws.stream.qqmusic.qq.com/C400004UWbRh2k5kGb.m4a?guid=4220211900&vkey=F3EBD4E9179142FE26A9F36A6A11EE79606BB9BCF2E68AB8462AB6AAE519D3D6E76A0E981648847F5E03448C20F24004E2F964521781E9B5&uin=&fromtag=123032');// 替换为实际音频文件的路径playButton.addEventListener('click',function(){audio.play();playButton.style.display='none';pauseButton.style.display='block';});pauseButton.addEventListener('click',function(){audio.pause();pauseButton.style.display='none';playButton.style.display='block';});</script></body></html>