在线试一试

单行文本

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;
}