当前位置：首页 > 行业动态 > 正文

html文字过长隐藏

admin
行业动态
2025-05-02
4304

使用CSS设置样式：overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 可限制文本超出容器宽度时显示省略号，适用于单行文本

CSS实现文字过长隐藏

单行文本省略（显示省略号）

通过组合white-space、overflow和text-overflow属性实现：

html文字过长隐藏第1张

.single-line {
  width: 200px; / 固定容器宽度 /
  white-space: nowrap; / 禁止换行 /
  overflow: hidden; / 隐藏溢出内容 /
  text-overflow: ellipsis; / 显示省略号 /
}

<div class="single-line">这是一段超长的文本内容，会被自动截断并显示省略号</div>

多行文本省略（限制行数）

使用-webkit-line-clamp配合display: -webkit-box：

.multi-line {
  display: -webkit-box; / 必须声明 /
  -webkit-box-orient: vertical; / 垂直排列 /
  -webkit-line-clamp: 3; / 显示3行后省略 /
  overflow: hidden; / 隐藏溢出内容 /
  height: 4.8em; / 根据行高计算高度 /
}

<div class="multi-line">这是一个需要显示多行文本的内容，当超过指定行数时会自动截断并显示省略号</div>

JavaScript动态截断方案

按字符数截断

function truncateText(element, maxLength) {
  const text = element.innerText;
  if (text.length > maxLength) {
    element.title = text; // 鼠标悬停显示完整内容
    element.innerText = text.substring(0, maxLength) + '...';
  }
}
// 使用示例
truncateText(document.querySelector('.js-truncate'), 50);

按像素宽度截断

function truncateByWidth(element, maxWidth) {
  const clone = element.cloneNode(true);
  clone.style.position = 'absolute';
  clone.style.visibility = 'hidden';
  document.body.appendChild(clone);
  let width = clone.offsetWidth;
  while (width > maxWidth && clone.textContent.length > 0) {
    clone.textContent = clone.textContent.substring(0, clone.textContent.length 1);
    width = clone.offsetWidth;
  }
  element.title = element.innerText;
  element.innerText = clone.textContent + '...';
  document.body.removeChild(clone);
}
// 使用示例
truncateByWidth(document.querySelector('.js-truncate'), 200);

核心属性对比表

属性组合	适用场景	浏览器支持率	是否支持响应式
`text-overflow: ellipsis`	单行文本省略	IE8+, Chrome, Safari, Opera	需配合媒体查询
`-webkit-line-clamp`	多行文本省略	Chrome, Safari	需配合媒体查询
JavaScript截断	精确控制字符/像素	全浏览器	可动态计算