css超出隐藏显示省略号

在CSS中，如果你想实现文本超出容器宽度时显示省略号（...），你可以使用 text-overflow 属性。这通常与 white-space 和 overflow 属性一起使用。下面是如何实现的步骤：

1. 
   

   设置容器宽度：首先，确保你的容器有一个明确的宽度。

   使用 white-space 属性：将 white-space 设置为 nowrap，这样文本就不会换行。
   

2. 使用 overflow 属性：将 overflow 设置为 hidden，这样超出容器宽度的文本就会被隐藏。
   

   使用 text-overflow 属性：将 text-overflow 设置为 ellipsis，这样超出部分就会显示为省略号（...）。
   

3. 
   

示例代码

.container {
  width: 200px; /* 设置容器宽度 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

HTML 示例

<div class="container">  这是一段很长的文本，它应该会在容器宽度超出时显示省略号。</div>

注意事项

• 
  

  多行文本：如果你需要在一个容器中实现多行文本的超出部分显示省略号，你需要结合使用 display: -webkit-box;，-webkit-line-clamp 和 -webkit-box-orient 属性（这在较新的浏览器中支持）。例如：

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示的行数为3 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

• 注意：-webkit-line-clamp 目前只在基于WebKit的浏览器（如Chrome和Safari）中支持，对于其他浏览器，你可能需要寻找替代方案或使用JavaScript来实现。

  
  

使用JavaScript实现多行文本省略号

如果你需要支持所有浏览器，你可以使用JavaScript来实现多行文本的省略号效果。以下是一个简单的示例：

function truncateText(selector, maxLines) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(el => {
    const lineHeight = parseInt(window.getComputedStyle(el).lineHeight, 10);
    const height = el.offsetHeight;
    const remainingHeight = height - (maxLines * lineHeight);
    if (remainingHeight > 0) {
      el.style.height = `${height - remainingHeight}px`; // 设置合适的高度以显示省略号
      el.style.overflow = 'hidden'; // 隐藏溢出的文本
      el.innerHTML += '<span>...</span>'; // 添加省略号
    }
  });
}

然后你可以在文档加载完成后调用这个函数：

document.addEventListener('DOMContentLoaded', () => {
  truncateText('.multiline-ellipsis', 3); // 选择器为你要应用多行省略的元素，3是最大行数
});

这样，无论是在较新的浏览器还是旧版浏览器中，你都可以实现多行文本的省略号效果。