css 省略号 三行

要在CSS中实现省略号显示三行文字，可以使用以下代码：

div {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

在上述代码中，我们将`display`属性设置为`-webkit-box`，这会将元素作为一个弹性容器显示。然后，我们使用`-webkit-line-clamp`属性将显示的行数限制为3行。最后，我们使用`text-overflow`属性设置文字溢出时的省略号样式为ellipsis（省略号）。

这样，当文字超出三行时，将会在第三行结束处显示省略号。

请注意，这段代码使用了WebKit引擎的私有属性，所以只在支持WebKit引擎的浏览器中生效。如果需要兼容其他浏览器，可以考虑使用更通用的解决方案，如使用JavaScript来计算行数并添加省略号。

参考资料：
- https://www.w3schools.com/css/css3_text_effects.asp<span class="em">1</span><span class="em">2</span>

相关问题

css溢出三行省略号，第三行短一点

CSS溢出三行省略号是一种文本溢出处理方式，它可以让超出指定区域的文本省略显示，并且只显示三行内容，最后一行的文本会短一些以适应宽度。这种处理方式通常用于显示较长的标题或者摘要等内容。

要实现CSS溢出三行省略号，可以使用以下CSS样式：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;

其中，-webkit-box-orient属性设置为vertical表示在垂直方向上排列文本；-webkit-line-clamp属性设置为3表示只显示三行文本；overflow属性设置为hidden表示超出区域的文本隐藏；text-overflow属性设置为ellipsis表示用省略号代替被省略的文本。

css溢出三行省略号，控制第三行字数

CSS中可以使用text-overflow属性来实现文本溢出三行省略号的效果，同时还可以结合其他的属性来控制第三行的字数。下面是实现的具体步骤：
1. 设置文本容器的宽度和高度，并且将overflow属性设置为hidden，这样就能够限制文本的显示范围，超出部分会被隐藏。
2. 使用white-space属性来设置文本的换行方式，通常情况下我们可以设置为nowrap来禁止文本换行。
3. 使用text-overflow属性来设置文本溢出时的省略号样式，可以设置为ellipsis或clip。
4. 最后，结合伪类选择器::after和content属性来控制第三行的字数。代码如下：

.container {
  width: 200px;
  height: 90px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.container::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 1.2em; /* 控制第三行的高度 */
}