如何使用CSS line-clamp实现文本行中间显示省略号？

仅靠CSS line-clamp无法实现文本中间显示省略号。-webkit-line-clamp的核心作用是限制文本显示的行数，并在最后一行的末尾添加省略号，这是它的固有特性，无法控制省略号出现在文本中间位置。

你之前尝试的-webkit-line-clamp: 2和-webkit-line-clamp: 3得到的结果，都是该属性的正常表现——截断文本到指定行数后，在最后一行末尾添加省略号。

要实现你期望的“中间显示省略号”效果，需要借助JavaScript来处理文本：

实现思路 #

计算文本总长度与可显示的总字符数，截取文本的开头部分和结尾部分，中间用省略号连接，再将处理后的文本插入到目标元素中。

示例代码 #

// 自定义函数：截断文本中间部分添加省略号
function truncateMiddle(text, maxLines, approxCharsPerLine) {
  const totalAllowChars = maxLines * approxCharsPerLine;
  // 如果文本长度小于等于可显示长度，直接返回原文本
  if (text.length <= totalAllowChars) return text;
  // 计算前后保留的字符数（预留5个字符给示例中的"....."）
  const keepLength = Math.floor((totalAllowChars - 5) / 2);
  return text.slice(0, keepLength) + '.....' + text.slice(-keepLength);
}

// 使用示例
const targetElement = document.getElementById('your-text-element');
const originalText = targetElement.textContent;
// 假设每行约显示50个字符，共3行
const truncatedText = truncateMiddle(originalText, 3, 50);
targetElement.textContent = truncatedText;

如果需要更精准的行数适配，可以结合getClientRects()方法计算每行实际容纳的字符数，不过上述简单版本已经能满足大部分场景的需求。

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