單行

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

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

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%);

}

效果如下

總結(jié)

以上所述是小編給大家介紹的css 實(shí)現(xiàn)超出規(guī)定行數(shù)自動(dòng)隱藏功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。