如何用CSS/JavaScript动态获取文本可见/溢出部分长度？

一、获取溢出文本的可见/溢出部分长度 #

CSS无法直接获取文本的可见或溢出长度，必须借助JavaScript实现：

• 核心思路是对比容器的可见高度与文本完全展开后的总高度：
  1. 创建一个隐藏的克隆容器，复制目标文本内容，设置和原容器一致的字体、行高样式，但不限制高度，以此得到文本的总高度。
  2. 对比原容器的clientHeight（可见高度）与克隆容器的高度，若克隆容器更高，则说明存在文本溢出。
  3. 要精确计算可见字符数，可通过二分法快速定位边界（比逐字符遍历更高效）：逐步调整克隆容器内的文本长度，直到其高度接近原容器高度，反推可见内容的最大长度。

示例代码：

function getVisibleTextLength(container) {
  const clone = container.cloneNode(true);
  clone.style.position = 'absolute';
  clone.style.visibility = 'hidden';
  clone.style.height = 'auto';
  clone.style.maxHeight = 'none';
  document.body.appendChild(clone);
  
  const containerHeight = container.clientHeight;
  let visibleLength = 0;
  const fullText = container.textContent;
  
  // 二分法查找可见文本边界
  let low = 0, high = fullText.length;
  while (low <= high) {
    const mid = Math.floor((low + high) / 2);
    clone.textContent = fullText.slice(0, mid);
    if (clone.clientHeight <= containerHeight) {
      visibleLength = mid;
      low = mid + 1;
    } else {
      high = mid - 1;
    }
  }
  
  document.body.removeChild(clone);
  return {
    visibleLength,
    overflowLength: fullText.length - visibleLength,
    hasOverflow: fullText.length > visibleLength
  };
}

二、窗口resize时的动态计算 #

完全可以实现动态计算，通过监听resize事件并添加防抖逻辑避免频繁触发：

function debounce(func, delay = 200) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

const textContainer = document.querySelector('.text-container');
const updateReadMore = () => {
  const result = getVisibleTextLength(textContainer);
  // 更新按钮状态与位置
  toggleReadMoreButton(result.hasOverflow);
  positionReadMoreButton();
};

// 初始化执行
updateReadMore();
// 监听窗口尺寸变化
window.addEventListener('resize', debounce(updateReadMore));

三、实现“阅读更多”按钮固定在最后一行末尾 #

推荐两种实用方案：

方案1：绝对定位配合容器内边距 #

• 给文本容器设置position: relative，按钮设置绝对定位固定在容器右下角，同时给容器预留按钮宽度的内边距，避免文本被按钮遮挡：

.text-container {
  position: relative;
  max-height: 120px; /* 自定义可见高度 */
  overflow: hidden;
  line-height: 1.5;
  padding-right: 80px; /* 预留按钮空间 */
}

.read-more {
  position: absolute;
  bottom: 0;
  right: 8px;
  background: #fff; /* 覆盖溢出的文本 */
  padding: 0 4px;
  cursor: pointer;
}

这种方案无需精确计算文本长度，实现简单，适配性强。

方案2：动态截断文本 + 按钮嵌入 #

• 结合前面的文本长度计算逻辑，截断文本并将按钮直接拼接在可见文本末尾，同时预留按钮宽度的计算空间：

function positionReadMoreButton() {
  const container = document.querySelector('.text-container');
  const readMoreBtn = document.querySelector('.read-more');
  const btnWidth = readMoreBtn.offsetWidth;
  
  // 预留按钮宽度的内边距
  container.style.paddingRight = `${btnWidth + 8}px`;
  
  const result = getVisibleTextLength(container);
  if (result.hasOverflow) {
    // 截断文本并添加省略号与按钮
    container.innerHTML = `${fullText.slice(0, result.visibleLength - 5)}...<span class="read-more">阅读更多</span>`;
  } else {
    container.textContent = fullText;
  }
}

内容的提问来源于stack exchange，提问作者Manuel Martín Pérez