简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 如何控制文本只能显示两行，多余的截取为省略号，要求纯css实现，兼容主流浏览器（含IE 8）...
PHP中文网
PHP中文网 2017-04-11 10:51:08
0
4
549
PHP中文网
PHP中文网

认证高级PHP讲师

全員に返信(4)
阿神
阿神2017-04-11 10:53:08 4棟

拿去玩，说爱我~

p.content{
    font-size:.8rem;
    line-height:1.2rem;
    height:2.4rem;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
いいねを押す +0
返信を追加
黄舟
黄舟2017-04-11 10:53:08 3棟

能告诉我JS怎么写的吗？

いいねを押す +0
返信を追加
黄舟
黄舟2017-04-11 10:53:08 2棟

疏忽了，知道伪元素的问题了，的确是要确定文字超过2行的情况。
既然要兼容IE8，个人建议还是后端处理或者前端JS吧。

伪元素的只适合文字绝对会被省略的情况

<style>
p {
    width:10em;
    position:relative;
    line-height:1.4em;
    height:2.8em;
    overflow:hidden;
}
p:after {
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
    background:#FFF;
    padding-left:0.2em;
}

</style>

<body>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</body>

火狐和IE8效果：

いいねを押す +0
返信を追加
Peter_Zhu
Peter_Zhu2017-04-11 10:53:08 1棟

可以参考这里，利用浮动元素的特性来实现。

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！