css里面怎么让文字长的时候两行显示，最多两行，多余的省略号显示，最重要的是支持ie浏览器，
css里面怎么让文字长的时候两行显示，最多两行，多余的省略号显示，最重要的是支持ie浏览器，谷歌浏览器之类我找到方法，但是到ie上就不行，过多是会三行四行
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div{
width: 100px;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
3、浏览器运行index.html页面，此时文字超过2行会自动把多余部分用省略号显示 。
温馨提示：内容为网友见解，仅供参考
第1个回答 2017-08-31
如果想要在一行里实现“超出长度显示省略号”，是可以的。
overflow: hidden;white-space: nowrap;text-overflow:ellipsis;
这几句css就可以，不要加上去的容器一定要写了宽度的
注意：这里实现的是“超出长度”，而不是“超出字数”，并且在一行里实现。
如果是两行或者三行的容器，想要纯用css实现这个方法，是没办法做到的。
可以提供两种方法，一是用程序输出时截字，二是用js判断字数截取。本回答被网友采纳
overflow: hidden;white-space: nowrap;text-overflow:ellipsis;
这几句css就可以，不要加上去的容器一定要写了宽度的
注意：这里实现的是“超出长度”，而不是“超出字数”，并且在一行里实现。
如果是两行或者三行的容器，想要纯用css实现这个方法，是没办法做到的。
可以提供两种方法，一是用程序输出时截字，二是用js判断字数截取。本回答被网友采纳
第2个回答 推荐于2018-01-29
.pTwoLine{
white-space:initial;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
关键词-webkit-line-clamp: 2;最多显示2行， text-overflow: ellipsis;超过2行...本回答被网友采纳
white-space:initial;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
关键词-webkit-line-clamp: 2;最多显示2行， text-overflow: ellipsis;超过2行...本回答被网友采纳
相似回答
