div内文字显示两行，多出的文字用省略号显示

最新推荐文章于 2020-06-20 00:14:55 发布

weixin_30687051

最新推荐文章于 2020-06-20 00:14:55 发布

阅读量249

点赞数

原文链接：http://www.cnblogs.com/wangyongx/p/5015469.html

版权

用-webkit-私有属性，代码如下：
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;


另外还有其他方法可以解决这个问题：
1、通过js来控制字数，然后截取文字
下面是一个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例子</title>
<style type="text/css">
.demo{width:100px;}
</style>
</head>
<body>
<div class="demo" id="demo">怎么显示两行或三行文字，然后多出的部分省略号代替?</div>
<script>
// js无法直接通过class获取对象，必须自己写一个方法,这样效率会非常低，原生js里最好用id获取，直接用id获取domo对象

var oBox=document.getElementById('demo');

// slice() 方法可从已有的数组中返回选定的元素。
// 您可使用负值从数组的尾部选取元素。
// 如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
// 此处需要根据需求自行修改slice()的值，以达到要显示的内容
var demoHtml = oBox.innerHTML.slice(0,10)+'...';
// 填充至指定位置
oBox.innerHTML = demoHtml;
</script>
</body>
</html>

2、还有一种方法是通过后台控制，用程序控制，程序输出时来控制；这个不会……

转载于:https://www.cnblogs.com/wangyongx/p/5015469.html

weixin_30687051

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div内文字显示两行，多出的文字用省略号显示

用-webkit-私有属性，代码如下：text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;另外还有其他方法可以解决这个问题：1、通过js...
复制链接

扫一扫