css超出两行用省略号代替

回答：可以使用CSS中的text-overflow属性，设置为ellipsis即可实现超出两行用省略号代替的效果。可以参考以下代码：

div {
  width: 200px;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

这样设置后，超出两行的文本就会被省略并用省略号代替。

相关问题

css两行文本超出省略号

您可以使用CSS中的text-overflow属性来实现此效果。下面是一个例子：

HTML代码：

<p class="ellipsis">这是一段超出两行的文本。</p>

CSS代码：

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 显示行数 */
}

解释：

- `white-space: nowrap;` 禁止换行
- `overflow: hidden;` 超出部分隐藏
- `text-overflow: ellipsis;` 超出部分显示省略号
- `-webkit-box-orient: vertical;` 设置文本方向为垂直
- `-webkit-line-clamp: 2;` 设置显示的行数为2行，超出的文本将被省略号代替。注意，该属性需要和 `display: -webkit-box;` 一起使用才能生效。

css文本两行溢出省略号

CSS文本两行溢出省略号可以通过使用CSS3的属性来实现。首先，设置文本容器的宽度，并将超出部分隐藏。然后，使用`text-overflow: ellipsis;`属性来显示省略号。接下来，使用`display: -webkit-box;`属性将文本容器转换为弹性盒模型，并使用`-webkit-line-clamp: 2;`属性来限制显示的行数为2行。最后，使用`-webkit-box-orient: vertical;`属性将文本在垂直方向排列。

下面是一个示例代码：

<div class="line style">内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部 分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部 分内容部分内容部分内容部分内容部分内容部分内容部分</div>

<style>
.style {
  width: 200px;
  background: pink;
}

.line {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>

这样，当文本超过2行时，就会显示省略号来代替溢出部分。