CSS设置文本超出隐藏显示省略号

在线试一试

单行文本

HTML代码如下：

<pclass="ellipsis1"title="单行文本，超出隐藏，并且显示省略号。试一试我隐藏啦！！！！">单行文本，超出隐藏，并且显示省略号。试一试我隐藏啦！！！！</p>

CSS代码如下：

.ellipsis1 {width: 300px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

多行文本

HTML代码如下：

<pclass="ellipsis2"title="多行文本，超出隐藏，并且显示省略号。测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，试一试我隐藏啦！！！！">多行文本，超出隐藏，并且显示省略号。测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，试一试我隐藏啦！！！！</p>

CSS代码如下：

.ellipsis2 {width: 300px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}