如何实现css单行和多行内容超出显示省略号

CSS中可以通过text-overflow属性实现单行和多行内容超出显示省略号。

对于单行文本，可以使用以下样式：

/* 单行文本 */
.overflow {
  white-space: nowrap; /* 强制不换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  overflow: hidden; /* 隐藏超出部分 */
}

对于多行文本，需要结合使用以下样式：

/* 多行文本 */
.overflow {
  display: -webkit-box; /* 使用webkit内核的box布局 */
  -webkit-box-orient: vertical; /* 垂直方向排列 */
  -webkit-line-clamp: 3; /* 显示3行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

以上代码中，-webkit-line-clamp属性设置为3表示只显示3行，超出部分显示省略号。需要注意的是，-webkit-line-clamp属性只在webkit内核浏览器中支持，其他浏览器需要使用更复杂的实现方式。

相关问题

css实现单行/多行的超出文本的裁剪、省略号

CSS提供了三种方式实现单行/多行的超出文本的裁剪、省略号。

1. 单行超出文本的裁剪、省略号

/* 单行文本超出省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

2. 多行超出文本的裁剪、省略号（WebKit内核浏览器）

/* 多行文本超出省略号（WebKit内核浏览器）*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

3. 多行超出文本的裁剪、省略号（非WebKit内核浏览器）

/* 多行文本超出省略号（非WebKit内核浏览器）*/
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-moz-box-lines: 2;
box-lines: 2;

p标签单行或多行超出显示省略号滑入显示

可以使用CSS的text-overflow属性和white-space属性来实现这个效果。

首先，设置p标签的样式为一个固定的宽度，并且超出部分隐藏，并显示省略号：

p {
  width: 200px; /* 设定固定宽度 */
  white-space: nowrap; /* 强制不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

然后，当鼠标滑入p标签时，将white-space属性设置为normal，使得文本可以自动换行并全部显示出来：

p:hover {
  white-space: normal; /* 鼠标滑入时自动换行并全部显示 */
}