html 显示多行(两行、三行、四行、五行)内容,且超出部分以省略号显示的做法

注意:display: -webkit-box;display: flex;不要控制同一个div,否则会因为样式问题达不到预期效果。

CSS

.customContent {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

Html

<div class='customAnswer'>
    <div style='padding:6px 12px;'>
        <div id='oneSeeAllId' class='customContent'>打开一秒招聘APP,切换到雇主端,点击职位,在职位中可以看到自己发布的订单,可以暂停/开启招聘信息,可以录用报名人员,结算订单等操作。打开一秒招聘APP,切换到雇主端,点击职位,在职位中可以看到自己发布的订单,可以暂停/开启招聘信息,可以录用报名人员,结算订单等操作。打开一秒招聘APP,切换到雇主端,点击职位,在职位中可以看到自己发布的订单,可以暂停/开启招聘信息,可以录用报名人员,结算订单等操作。
        </div>
    </div>
    <div class='seeAll' title='0' onclick='event.stopPropagation();testTypeOneSeeAllClick(this)'>查看全部<span class='iconfont icon-fanhui' style='color:#fe4800;font-size:14px;'></span></div>
    <div class='transCustom' onclick='transCustomClick(this)'>
        <div class='transCustomContent'>转人工客服</div>
    </div>
    <div class='customOperate'>
        <div class='solveLeft' onclick='testSolveClick(this,1,2)' id='2'> <span class='iconfont  icon-duihao-weixuanzhong'></span>解决</div>
        <div style='height:25px;width:1px;background:#eaebeb;'></div>
        <div class='solveRight' onclick='testSolveClick(this,2,9)' id='9'><span class='iconfont solveIconfontStyle icon-guanbi-weixuanzhong'></span>未解决</div>
    </div>
</div>

效果

image.png

html 显示一行内容,且超出部分以省略号显示的做法

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。