末尾显示....的用法

最新推荐文章于 2022-09-09 21:13:54 发布

星星球

最新推荐文章于 2022-09-09 21:13:54 发布

阅读量653

点赞数

本文链接：https://blog.csdn.net/dabaxy/article/details/73920699

版权

文字超出的部分显示……
看到一个博客上的示例代码

CSS代码：
.box {
    width: 400px; 
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
HTML代码：
<div class="box">
    【大众点评与美团网合并 王兴张涛担任联席CEO】大众点评网与美团网今天联合发布声明，宣布达成战略合作，双方已共同成立一家新公司。新公司将实施Co-CEO制度，美团CEO王兴和大众点评CEO张涛将同时担任联席CEO和联席董事长，重大决策将在联席CEO和董事会层面完成。
</div>

显示效果如下

这里写图片描述

应用到项目里的时候也想实现这样的效果，但是出了问题，
这里写图片描述

如图，tr竖行显示了，
找了半天原因，原来这个代码

display: -webkit-box;

这段代码需要加到块级元素上才行

调整后，又成这种效果
这里写图片描述

就是没出…，解决方法，再加一段代码

word-break: break-all;

语法
word-break: normal|break-all|keep-all;
值描述
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

这里写图片描述

到此，要求达到，感谢同事的努力

补充一点，除以上方法外，还可用js来解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="limit" style="border: 1px solid black;">
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    </div>
</body>
</html>
<script src="./jquery-1.12.2.js"></script>
<script>

$(function(){
    var width = 10;
    if($('.limit').text().length>width){
        $('.limit').text($('.limit').text().substring(0,width));
        $('.limit').html($('.limit').html()+'...');
    }
})
</script>