注意:
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>
效果
html 显示一行内容,且超出部分以省略号显示的做法