单行文本
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; }
发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/216450.html原文链接:https://javaforall.net
