如何按指定字符数截断产品描述并添加省略号？

你需要按指定字符数截断带HTML格式的产品描述，当前用-webkit-line-clamp的CSS方案只能按行数截断，无法精准控制字符数，以下是可行的解决方法：

步骤1：提取纯文本并编写截断函数 #

原描述包含HTML标签，直接截断会破坏标签结构，需先提取纯文本再处理：

// 提取HTML中的纯文本
function getPlainText(html) {
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = html;
  return tempDiv.textContent || tempDiv.innerText || '';
}

// 按字符数截断文本，超出部分加省略号
function truncateText(text, maxLength) {
  if (text.length <= maxLength) return text;
  return text.substring(0, maxLength) + '...';
}

步骤2：修改setDescricao方法 #

保存完整HTML内容，同时生成截断后的文本内容：

setDescricao() {
  const fullHtml = this.item.item_linkWeb?.linkWeb.descricaoHtml || '';
  const plainText = getPlainText(fullHtml);
  // 自定义最大截断字符数，示例设为100
  const truncatedText = truncateText(plainText, 100);
  
  // 把截断后的文本转为基础HTML格式
  const truncatedHtml = `<p>${truncatedText}</p>`;
  
  const descricaoEl = document.getElementById('descricao');
  descricaoEl.innerHTML = truncatedHtml;
  // 将完整内容存入元素自定义属性，用于展开功能
  descricaoEl.dataset.fullHtml = fullHtml;
}

步骤3：修改展开按钮的rollDown方法 #

实现截断/完整内容的切换逻辑：

rollDown() {
  const descricaoEl = document.getElementById('descricao');
  const toggleBtn = this;
  const isTruncated = descricaoEl.innerHTML !== descricaoEl.dataset.fullHtml;
  
  if (isTruncated) {
    // 切换为完整内容
    descricaoEl.innerHTML = descricaoEl.dataset.fullHtml;
    toggleBtn.textContent = 'Ver menos';
  } else {
    // 恢复截断状态
    const plainText = getPlainText(descricaoEl.dataset.fullHtml);
    const truncatedHtml = `<p>${truncateText(plainText, 100)}</p>`;
    descricaoEl.innerHTML = truncatedHtml;
    toggleBtn.textContent = 'Ver mais';
  }
}

步骤4：调整CSS样式 #

移除原有的行数限制相关属性，简化样式：

.hiddendescricao {
  overflow: hidden;
  position: relative;
  line-height: 1.5; /* 可选：统一行高保证排版一致 */
}

补充说明 #

• 若要保留原HTML格式（如加粗、换行），可优化截断逻辑，避免截断在标签中间（逻辑稍复杂，但能保留原有排版）。
• 可将最大字符数抽为全局变量，方便统一调整截断长度。

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