如何实现第二行line clamp并在末尾长单词中间添加省略号

需要实现文本的2行截断效果，但当第二行末尾是超长单词时，希望省略号出现在单词中间（而非直接截断整个单词）。当前使用的代码如下：

现有代码 #

CSS #

.container {
  width: 300px;
  border: 1px solid blue;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

HTML #

<div class="container">
  Here we have some long text that needs to be clamped at the 2nd line verylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongword
</div>

当前原生的-webkit-line-clamp会直接截断整个长单词，无法实现单词中间插入省略号的效果，需要替代方案。

原生-webkit-line-clamp依赖浏览器默认换行规则，不会拆分单词插入省略号，以下两种方案可实现需求：

方法一：纯CSS模拟方案 #

通过限制容器高度、强制单词换行，再用伪元素添加带背景的省略号，模拟单词中间截断效果：

.container {
  width: 300px;
  border: 1px solid blue;
  overflow: hidden;
  line-height: 1.5; /* 定义基础行高 */
  max-height: 3em; /* 两行总高度 = 行高 × 2 */
  word-break: break-all; /* 强制拆分长单词 */
  position: relative;
  background: #fff; /* 确保背景色统一，避免遮罩露底 */
}

.container::after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  background: inherit;
  padding-left: 8px; /* 覆盖部分文本，避免省略号与末尾字符重叠 */
}

优化点：如果浏览器支持:has()伪类，可实现仅溢出时显示省略号：

/* 需将文本包裹在内部span中 */
.container:has(> .content)::after {
  content: '';
}
.container:has(> .content:not(:empty))::after {
  content: '...';
}

方法二：JavaScript精准截断方案 #

通过计算文本高度，动态截取内容并插入省略号，确保仅在溢出时生效，且省略号自然出现在单词中间：

<div class="container" id="clampContainer">
  Here we have some long text that needs to be clamped at the 2nd line verylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongwordverylongword
</div>

const container = document.getElementById('clampContainer');
const lineHeight = parseFloat(getComputedStyle(container).lineHeight);
const maxHeight = lineHeight * 2; // 两行文本的总高度

if (container.scrollHeight > maxHeight) {
  let originalText = container.textContent;
  let currentText = originalText;
  
  // 逐步截取文本，直到容器高度符合两行要求
  while (container.scrollHeight > maxHeight && currentText.length > 0) {
    currentText = currentText.slice(0, -1);
    container.textContent = currentText + '...';
  }
}

该方案兼容性更好，且能精准控制省略号的显示时机与位置。

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