鍍金池/ 問答/HTML5  HTML/ css 解決多行文字截斷問題

css 解決多行文字截斷問題

節(jié)點內(nèi)容包括 文字 + >，當(dāng)節(jié)點高度超出2行時，文字內(nèi)容被截斷，但箭頭還展示。如下圖：

This is long long hotel name.This is long long hotel
name.This is long long hotel name. Thi is This ... >

請教大家，如何用css解決，多謝

斜體文字

回答
編輯回答
青檸

webkit內(nèi)核的瀏覽器

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

兼容其他內(nèi)核的

p {
    position:relative;
    line-height:1.4em;
    /* 高度=2倍的行高 */
    height:2.8em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
}

如果要箭頭或者比較好的效果，建議使用js 截斷插件

https://github.com/josephschm...

https://github.com/BeSite/jQu...

2018年3月31日 07:50
編輯回答
別傷我

多行文本超出隱藏

 overflow:hidden;
 text-overflow:ellipsis;
 display:-webkit-box;
 -webkit-line-clamp:2;//想要的行數(shù)
 -webkit-box-orient:vertical;

不用js怕是做不出+>箭頭這種效果

2017年4月1日 18:49
編輯回答
薄荷糖
<div style="width:100%;position:relative;">
<div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-right:30px;">long words</div>
<i style="position:absolute;right:0;top:0;color:green;font-weight:bold;cursor:pointer;">小圖標(biāo)</i>
</div>
2017年6月22日 15:51