如何在不使用裁剪的情况下隐藏text-overflow: ellipsis产生的省略号？

要把文本"Lorem ipsum dolor"精准截断为"Lorem ipsum"，可以试试这几种实用方法：

方法一：CSS伪元素覆盖（适合固定场景） #

如果已经明确要保留的内容长度，直接设置容器宽度刚好装下"Lorem ipsum"，再用伪元素盖住多余的字符就行：

.text-truncate {
  width: 95px; /* 根据字体大小调整，刚好放下目标文本 */
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  background: #fff; /* 容器背景色 */
}

.text-truncate::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 25px; /* 宽度足够覆盖多余的"dolor"开头部分 */
  background: inherit;
}

注意：得根据你用的字体大小、容器背景色调整数值，保证多余字符完全被盖住。

方法二：JavaScript动态截断（灵活适配） #

要是文本或容器尺寸不固定，用JS直接截断到指定单词数最靠谱：

function truncateToTargetWords(text, targetWordCount) {
  const wordList = text.split(' ');
  return wordList.length <= targetWordCount ? text : wordList.slice(0, targetWordCount).join(' ');
}

// 调用示例
const originalText = "Lorem ipsum dolor";
document.querySelector('.text-truncate').textContent = truncateToTargetWords(originalText, 2);

这种方法直接修改文本内容，确保只显示你要的"Lorem ipsum"，不用纠结样式适配的问题。

方法三：CSS单词截断辅助（单行场景拓展） #

也可以用CSS的单词保留规则配合溢出隐藏，不过得确保容器宽度刚好容纳目标单词：

.text-truncate {
  white-space: nowrap;
  overflow: hidden;
  word-break: keep-all; /* 不拆分单词，确保完整显示到最后一个完整单词 */
  width: 95px; /* 刚好放下"Lorem ipsum" */
}

这种方法依赖容器宽度的精准设置，适合固定布局的场景。

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