單行

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

多行(兼容各個瀏覽器)//通過覆蓋最后幾個字的形式

p{

position:relative;

line-height:1.4em;

height:4.2em;/* 3 倍line-height 多少倍就是多少行*/

overflow:hidden;

}

.p::after {

content:"...";

font-weight:bold;

position:absolute;

bottom:0;

right:0;

padding:0 20px 1px 45px;

background: -webkit-linear-gradient(left, transparent, #fff 55%);

background: -o-linear-gradient(right, transparent, #fff 55%);

background: -moz-linear-gradient(right, transparent, #fff 55%);

background: linear-gradient(to right, transparent, #fff 55%);

}

效果如下

總結

以上所述是小編給大家介紹的css 實現超出規定行數自動隱藏功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

總結

以上是生活随笔為你收集整理的html中文字过长 自动隐藏,css 实现文字过长自动隐藏功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。