单行文本:方法/步骤
-
1
根据自己的需求编写好模块(如果你不是新手,直接看第二步!)
HTML代码:
<div class="demo"><p>内容</p></div>
CSS代码:
.demo{
width: 300px; height: 30px;
line-height: 30px;
border: 1px solid #ddd;
border-radius: 3px;
margin: 50px auto;
padding: 0 10px;
}
-
2
设置单行文本超出范围后隐藏溢出并增加省略号...
CSS代码:
.texthide{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
END
多行文本溢出:方法/步骤
-
根据自己的需求编写好模块(如果你不是新手,直接看第二步!)
HTML代码:<div class="demo"><p>内容</p></div>
CSS代码:
.demo{
width: 300px; height: 90px;
line-height: 30px;
border: 1px solid #ddd;
border-radius: 3px;
margin: 50px auto;
padding: 0 10px;
}
-
设置多行文本超出范围后隐藏溢出并增加省略号...
核心代码:
.texthide{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}