Maison  >  Questions et réponses  >  le corps du texte

javascript - 如何控制文本只能显示两行,多余的截取为省略号,要求纯css实现,兼容主流浏览器(含IE 8)...

PHP中文网PHP中文网2770 Il y a quelques jours552

répondre à tous(4)je répondrai

  • 阿神

    阿神2017-04-11 10:53:08

    拿去玩,说爱我~

    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;
    }

    répondre
    0
  • 黄舟

    黄舟2017-04-11 10:53:08

    能告诉我JS怎么写的吗?

    répondre
    0
  • 黄舟

    黄舟2017-04-11 10:53:08

    疏忽了,知道伪元素的问题了,的确是要确定文字超过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效果:

    répondre
    0
  • 天蓬老师

    天蓬老师2017-04-11 10:53:08

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

    répondre
    0
  • Annulerrépondre