多餘文字轉化為省略符號css

標籤：border   轉化   psi   amp   技術分享   src   com   設定   over   

1.text-overflow:ellipsis實現

overflow: hidden;text-overflow: ellipsis;//clip|ellipsiswhite-space: nowrap;

 

2.-webkit-line-clamp　　

width: 200px;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;border:solid 1px black;

3.用包含省略符號(…)的元素類比實現

.demo {    height: 200px;    width: 200px;    position:relative;    line-height:1.4em;    height:4.2em;    overflow:hidden;}.demo::after {    content:"...";    font-weight:bold;    position:absolute;    bottom:0;    right:0;    padding:0 -20px 1px 45px;    background-color:white;}

這裡用一個包含了省略符號，且背景色為白色的虛擬元素遮蓋了部分內容。高度 height 是行高 line-height 的三倍。需要顯示幾行文字就設定為幾倍。

這種思路實現較為簡單，相容性也比較好

 

多餘文字轉化為省略符號css