如何实现文本部分显示并渐隐隐藏剩余内容（不使用overflow）

实现思路 #

不用overflow属性，通过伪元素创建渐变遮罩层覆盖在标题容器右侧，同时强制文本单行显示，实现长内容的自然渐隐效果。

代码示例 #

HTML结构

<div class="song-title">这是一首非常非常非常长的歌曲标题用来测试渐隐效果</div>

CSS样式

.song-title {
  /* 自定义容器宽度，根据你的布局调整 */
  width: 220px;
  /* 强制文本不换行 */
  white-space: nowrap;
  /* 相对定位，让伪元素基于容器定位 */
  position: relative;
  /* 给右侧遮罩预留空间 */
  padding-right: 25px;
}

.song-title::after {
  content: '';
  /* 绝对定位到容器右侧 */
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  /* 遮罩宽度，控制渐隐区域的大小 */
  width: 25px;
  /* 渐变背景：从透明过渡到容器背景色（这里假设背景为白色，需和实际背景匹配） */
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}

调整说明 #

• 容器width：根据你的播放器布局需求修改，控制标题显示的最大宽度
• 伪元素width：调整这个值可以改变渐隐区域的长短，数值越大渐隐过渡越平缓
• 渐变颜色：把rgba(255,255,255,1)替换成你播放器标题区域的实际背景色，避免遮罩违和

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