CSS超出长度范围显示省略号

要在CSS中实现超出长度显示省略号的效果，你可以使用以下属性：

1. overflow：该属性定义了当内容溢出元素框时发生的事情，此处我们将它设为hidden，意味着溢出的内容会被隐藏。
2. white-space：该属性设置如何处理元素内的空白，我们将其设为nowrap，这样文本就不会自动换行。
3. text-overflow：此属性定义如何显示被覆盖的溢出内容，我们将其设为ellipsis，这样就会在文本末尾显示省略号（...）。

示例代码如下：

 

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

然后，将该样式应用到你的HTML元素上，例如：

 

<div class="ellipsis">这是一段很长的文本，会超出容器的范围。</div>

这样，当文本长度超出div容器的宽度时，就会在文本末尾显示省略号。

 

如果有两行文本，需要这么设置(uniapp的H5页面)：

.ellipsis {
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
// white-space: nowrap; /* 防止文本换行 */
display: -webkit-box;
-webkit-line-clamp: 2;//显示两行文本
-webkit-box-orient: vertical;
height: 2.4em;//行高1.2的2倍
}