2023css怎么实现超出两行显示省略号

CSS中，通过text-overflow属性可以实现当文本内容超出指定区域时，显示省略号的效果，让页面更美观。以下就是详细介绍：

1. text-overflow属性

CSS中的text-overflow属性用于设置当元素内容溢出其框时如何操作。它有三个常用值：

• clip：剪切文本来适应元素宽度。遮断内容后面的文本，并且不显示省略号。
• ellipsis：显示一个省略号（...），以表示剪切的文本。
• string：更改省略号字符为指定的字符串。

如下示例，我们可以看到当文本溢出父容器时，用省略号来缩写内容。

div {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

其中white-space属性用于指定如何处理元素内的空白，nowrap表示文本不换行。overflow属性用于指定元素内容溢出时如何处理，hidden表示溢出的内容隐藏。

2. 结合max-height属性

当元素中的文本过多，需要通过设置高度来限制文本展示的行数，如果限定高度后再使用text-overflow属性可能会发现省略号仍然无法出现。

原因是text-overflow仅适用于具有固定宽度的块级元素。因此，我们需要结合max-height属性来解决此问题。

如下示例，我们设置元素最大高度为三行，当文本超出三行时，用省略号来缩写内容。

div {
  width: 150px;
  max-height: 3em;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

其中，-webkit-line-clamp属性用于指定文本行数，而-webkit-box-orient属性则用于指定文本方向，vertical表示文本为垂直方向排列。

3. 结合JavaScript

以上方式均是基于CSS的样式实现，如果想动态地展示文章的内容，需要结合JavaScript来实现。

通过计算元素实际高度和内容的实际高度来决定是否需要展示省略号。下面是一个简单的示例：

var element = document.querySelector('.element');
var contentHeight = element.scrollHeight;
var elementHeight = parseInt(getComputedStyle(element).height);

if (contentHeight > elementHeight) {
  element.addEventListener('click', function() {
    this.classList.toggle('expand');
  });
}

在此示例中，我们首先获取元素内容的高度和元素实际高度，如果内容高度大于元素高度，那么就给元素添加一个点击事件，通过CSS样式展示或隐藏文本内容。

4. 其他注意事项

   • text-overflow属性仅适用于单一行的元素或具有确定宽度的块级元素。
   • 在使用text-overflow属性时，white-space属性应为nowrap。
   • 在结合max-height属性时，white-space属性应为normal，并使用-webkit-line-clamp属性来指定行数。
   • 不同浏览器对text-overflow属性的支持可能不同，请谨慎使用。

总的来说，使用text-overflow属性可以让页面更加美观，同时也能够更好的展示文章的内容。希望本文对您有所帮助。

以上就是css怎么实现超出两行显示省略号的详细内容，更多请关注zzsucai.com其它相关文章！