固定宽高动态内容div：如何在ellipsis生效时替换...为...read more？

当然可以做到！要实现这个需求，关键是先判断容器内的内容是否真的发生了溢出，只有当溢出触发默认省略号时，再把它替换成...read more，同时给这个“read more”加上点击展开的功能。下面是完整的可运行方案：

实现思路 #

1. 检测溢出状态：通过对比容器的scrollWidth（内容实际宽度）和clientWidth（容器可见宽度），如果前者大于后者，说明内容溢出了。
2. 动态显示read more：当确认溢出时，显示隐藏的...read more元素；如果内容没溢出，就把它藏起来。
3. 点击展开逻辑：给read more绑定点击事件，点击后取消文本的单行限制，让内容完全展示。

完整代码 #

HTML #

<p>调整浏览器窗口大小，看看下方盒子里的文本变化：当文本过长时，默认省略号会被替换成...read more，点击就能展开全部内容。</p>
<div id="text-container">
  <span id="main-text">Lorem ipsum dolor. Sit in your comfy office chair and OOH and AHH at the cool ellipsis! Here's some extra dynamic content to test the overflow behavior properly.</span>
  <span id="read-more-btn" style="display: none;">...read more</span>
</div>

CSS #

#text-container {
  width: 90%;
  border: 1px solid #000;
  padding: 8px;
  margin: 48px auto 0;
  white-space: nowrap;
  overflow: hidden;
}

#read-more-btn {
  color: #007bff;
  cursor: pointer;
  margin-left: 3px;
}

/* 展开后的样式 */
#text-container.expanded {
  white-space: normal;
}

JavaScript #

const container = document.getElementById('text-container');
const mainText = document.getElementById('main-text');
const readMoreBtn = document.getElementById('read-more-btn');

// 检查内容是否溢出的函数
function checkIfOverflow() {
  const hasOverflow = mainText.scrollWidth > container.clientWidth;
  readMoreBtn.style.display = hasOverflow ? 'inline' : 'none';
}

// 点击展开内容
readMoreBtn.addEventListener('click', () => {
  container.classList.add('expanded');
  readMoreBtn.style.display = 'none';
  // 如果需要收起功能，可以改成toggle class，同时切换按钮文本为"read less"，这里先实现基础展开
});

// 初始化时检查一次
checkIfOverflow();
// 窗口 resize 时重新检查溢出状态
window.addEventListener('resize', checkIfOverflow);

额外说明 #

• 这个方案针对单行文本溢出的场景，如果是多行文本溢出（比如用-webkit-line-clamp实现多行省略），需要改用scrollHeight和clientHeight来判断溢出，同时文本截断的逻辑会需要额外处理（比如动态截取文本并添加省略号和read more）。
• 把文本和read more拆成两个独立的span，能更灵活地控制样式和交互，避免直接修改原文本内容可能带来的问题。

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