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

在线试一试

单行文本

HTML代码如下：

<p

      class="ellipsis1"

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

>

      单行文本，超出隐藏，并且显示省略号。试一试我隐藏啦！！！！

</p>

CSS代码如下：

.ellipsis1 {

  width: 300px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

多行文本

HTML代码如下：

<p

      class="ellipsis2"

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

>

      多行文本，超出隐藏，并且显示省略号。测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，试一试我隐藏啦！！！！

</p>

CSS代码如下：

.ellipsis2 {

  width: 300px;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;

  overflow: hidden;

}