css 超出显示省略号

设置了以上的CSS样式，当元素内有行内元素时，即使行内元素没有设置这些CSS样式，也会显示省略号效果。而设置了以上CSS样式的元素必须能对width属性生效，例如display为block或inline-block。同时，设置了样式的标签内也可以设置其他标签。如果需要多行出现省略号，可以使用以下方式：

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

这样的效果是在宽度为300px的p标签中，显示两行内容，超出的内容会被隐藏并显示省略号。

相关问题

css超出显示省略号

要在CSS中实现文本超出显示省略号的效果，可以使用以下样式：

.overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

然后，在HTML标记中添加该样式的类名即可：

<p class="overflow-ellipsis">这是一段超出显示省略号的文本。</p>

这样，当文本内容超出容器的宽度时，就会自动显示省略号来表示截断的部分。

css超出内容省略号显示

当元素中的文本内容过长时，可以使用CSS中的text-overflow属性和white-space属性来实现超出部分的省略号显示。其中，white-space属性设置文本的排版方式，text-overflow属性设置文本内容超出容器大小时的显示效果。需要注意的是，设置了以上CSS的元素必须能对width属性生效（如：display为block、inline-block）。
以下是实现方法：
1.单行文本超出部分省略号显示：

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

2.多行文本超出部分省略号显示：

display: -webkit-box;
-webkit-line-clamp: 行数;
-webkit-box-orient: vertical;
overflow: hidden;

其中，-webkit-line-clamp属性设置要显示的行数，需要注意的是该属性只在WebKit内核的浏览器中生效，其他浏览器需要使用JS等其他方式实现。
--相关问题--: