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的文本溢出处理来显示省略号。以下是两种常见的实现方式：

1. 使用`text-overflow: ellipsis`属性：
- 首先，需要设置容器的宽度和`overflow: hidden`属性，以限制文本显示的区域。
- 然后，使用`white-space: nowrap`属性来防止文本换行。
- 最后，使用`text-overflow: ellipsis`属性来显示省略号。

示例代码如下：

   .container {
     width: 200px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }

2. 使用伪元素和绝对定位：
- 首先，需要设置容器的宽度和`overflow: hidden`属性，以限制文本显示的区域。
- 然后，使用伪元素`::after`来添加省略号，并设置绝对定位。

示例代码如下：

   .container {
     width: 200px;
     overflow: hidden;
     position: relative;
   }
   
   .containerafter {
     content: "...";
     position: absolute;
     bottom: 0;
     right: 0;
     background-color: white; /* 可选，根据实际情况设置背景色 */
   }

css两行超出显示省略号后面带查看更多

要实现这个效果，你可以使用CSS中的文本溢出属性（text-overflow）和white-space属性，以及CSS伪类（:after）。

首先，在你想要显示省略号的元素上，添加以下CSS样式：

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

然后，在你想要添加"查看更多"链接的元素后面添加一个伪元素(:after)，比如：

<div class="ellipsis">这里是超出两行的文本内容</div>

.ellipsis:after {
  content: " 查看更多";
  color: blue;
  cursor: pointer;
}

最后，你可以使用JavaScript或jQuery来实现点击"查看更多"链接后显示完整内容的效果。比如，可以给"查看更多"链接添加点击事件，当点击后移除`text-overflow`和`white-space`属性，以及隐藏伪元素(:after)。