文本溢出显示ellipsis省略号时如何获取可见及被隐藏的文本

浏览器没有提供直接读取CSS ellipsis截断后可见/隐藏文本的原生API，需要手动通过宽度计算实现。你提到的逗号分隔列表场景不需要处理任意文本，可以用更轻量化的方案适配，且你需要的... +X more自定义后缀效果本身就不适合用原生CSS ellipsis实现（原生仅支持显示固定省略号，无法追加自定义文本），自行计算渲染可控性更高。

适配列表场景的轻量化实现方案（推荐） #

实现逻辑如下：

• 预先创建一个宽度计算辅助元素，样式和你的文本输入框完全一致（字体、字号、内边距、边框都保持相同），额外设置position: absolute; visibility: hidden; white-space: nowrap; width: auto，确保它不占页面布局空间、不可见，且能根据内容自适应宽度。
• 计算输入框可容纳文本的最大宽度：用输入框的clientWidth减去左右内边距、左右边框宽度，得到文本实际可占用的最大宽度maxTextWidth。
• 从列表第一项开始，逐个往辅助元素中拼接测试内容（拼接格式为已选中项拼接结果, 当前项 + 预计要显示的... +X more后缀），每次拼接完读取辅助元素的scrollWidth。
• 当拼接后的测试内容宽度超过maxTextWidth时停止拼接，此时已拼接的列表项就是可见内容，剩余未拼接的项数就是后缀中需要显示的省略数量。
• 最后将拼接好的带自定义后缀的内容直接赋值给输入框即可。

代码示例 #

// 示例列表数据
const itemList = ["item1", "item2", "item3", "item4", "item5", "item6", "item7"]
// 你的目标文本输入框元素
const inputEl = document.querySelector('#target-input')
// 提前创建的宽度计算辅助元素
const measureEl = document.querySelector('#width-measure-el')

// 计算输入框可容纳文本的最大宽度
const computedStyle = getComputedStyle(inputEl)
const paddingLR = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight)
const borderLR = parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth)
const maxTextWidth = inputEl.clientWidth - paddingLR - borderLR

let visibleItems = []
let hiddenItemCount = 0

for (let i = 0; i < itemList.length; i++) {
  const currentTestItems = [...visibleItems, itemList[i]]
  const restCount = itemList.length - i - 1
  // 测试内容要包含后缀，预留后缀的宽度
  const testFullText = currentTestItems.join(', ') + (restCount > 0 ? `,... +${restCount} more` : '')
  measureEl.textContent = testFullText
  
  if (measureEl.scrollWidth > maxTextWidth) {
    hiddenItemCount = itemList.length - i
    break
  }
  visibleItems.push(itemList[i])
}

// 最终赋值给输入框
inputEl.value = visibleItems.join(', ') + (hiddenItemCount > 0 ? `,... +${hiddenItemCount} more` : '')

通用任意文本场景的实现方案 #

如果你需要处理非结构化的任意文本，获取原生CSS ellipsis截断的可见/隐藏内容，可以用逐字符测试的逻辑：

• 同样准备和目标输入框样式一致的宽度计算辅助元素
• 拿到输入框的最大可容纳文本宽度后，从文本第一个字符开始逐个累加放入辅助元素，直到辅助元素宽度超过最大宽度
• 此时累加的字符就是可见内容，剩余未累加的就是被省略的内容
• 注意不能直接通过字符数判断，不同字符（中文、英文、全角/半角符号）的渲染宽度不同，必须实际测量渲染后的宽度。

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