css3实现超过两行文字,超出用三个点显示(兼容性不行,仅供…

CSS3 实现超过两行文字，超出用三个点显示的完整攻略

在网页设计中，经常会遇到需要限制文本长度的情况，特别是在一些列表、卡片等组件中，需要限制文本长度并用省略号代替。本文将为您提供一份 CSS3 实现超过两行文字，超出用三个点显示的完整攻略，包括使用 text-overflow 属性和 line-clamp 属性两种方法，同时提供两个示例说明。

使用 text-overflow 属性

text-overflow 属性可以用于控制文本溢出时的显示方式，包括省略号、裁剪等。可以按照以下步骤进行操作：

1. 设置文本容器的宽度和高度：设置文本容器的宽度和高度，限制文本的显示范围。

2. 设置文本溢出时的显示方式：使用 text-overflow 属性设置文本溢出时的显示方式为省略号。

3. 设置文本换行方式：使用 white-space 属性设置文本的换行方式为 normal。

4. 设置文本省略号位置：使用 text-align 属性设置文本省略号的位置为右侧。

.ellipsis {
  width: 200px;
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  text-align: right;
}

使用 line-clamp 属性

line-clamp 属性可以用于控制文本的行数，超出指定行数时，文本将被截断并用省略号代替。可以按照以下步骤进行操作：

1. 设置文本容器的宽度和高度：设置文本容器的宽度和高度，限制文本的显示范围。

2. 设置文本换行方式：使用 display 属性设置文本的换行方式为 -webkit-box。

3. 设置文本行数：使用 -webkit-line-clamp 属性设置文本的行数为 2。

4. 设置文本省略号位置：使用 text-align 属性设置文本省略号的位置为右侧。

.ellipsis {
  width: 200px;
  height: 60px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: right;
}

示例1：使用 text-overflow 属性

在这个示例中，我们将使用 text-overflow 属性实现超过两行文字，超出用三个点显示。可以按照以下步骤进行操作：

1. 设置文本容器的宽度和高度：设置文本容器的宽度和高度，限制文本的显示范围。

2. 设置文本溢出时的显示方式：使用 text-overflow 属性设置文本溢出时的显示方式为省略号。

3. 设置文本换行方式：使用 white-space 属性设置文本的换行方式为 normal。

4. 设置文本省略号位置：使用 text-align 属性设置文本省略号的位置为右侧。

<div class="ellipsis">
  这是一段超过两行的文本，超出部分将用省略号代替。
</div>

.ellipsis {
  width: 200px;
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  text-align: right;
}

示例2：使用 line-clamp 属性

在这个示例中，我们将使用 line-clamp 属性实现超过两行文字，超出用三个点显示。可以按照以下步骤进行操作：

1. 设置文本容器的宽度和高度：设置文本容器的宽度和高度，限制文本的显示范围。

2. 设置文本换行方式：使用 display 属性设置文本的换行方式为 -webkit-box。

3. 设置文本行数：使用 -webkit-line-clamp 属性设置文本的行数为 2。

4. 设置文本省略号位置：使用 text-align 属性设置文本省略号的位置为右侧。

<div class="ellipsis">
  这是一段超过两行的文本，超出部分将用省略号代替。
</div>

.ellipsis {
  width: 200px;
  height: 60px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: right;
}

总结

本文为您提供了一份 CSS3 实现超过两行文字，超出用三个点显示的完整攻略，包括使用 text-overflow 属性和 line-clamp 属性两种方法，同时提供了两个示例说明。在实际应用中，可以根据具体需求选择合适的方法实现文本的省略显示。