css 超出部分顯示省略號 匯總

單行： 加寬度

overflow: hidden; text-overflow:ellipsis; white-space: nowrap;

 

多行：

display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;

 

兼容移動端

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;} p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px; 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%); }

 

注：

1. 將height設置為line-height的整數倍，防止超出的文字露出。
2. 給p::after添加漸變背景可避免文字只顯示一半。
3. 由於ie6-7不顯示content內容，所以要添加標簽兼容ie6-7（如：<span>…<span/>）；兼容ie8需要將::after替換成:after。