div+css怎么显示两行或三行文字，然后多出的部分省略号代替？？

2025-04-15 10:15:57

推荐回答（5个）

回答1：

如果想要在一行里实现“超出长度显示省略号”，是可以的。

overflow: hidden;white-space: nowrap;text-overflow:ellipsis;

这几句css就可以，不要加上去的容器一定要写了宽度的

注意：这里实现的是“超出长度”，而不是“超出字数”，并且在一行里实现。

如果是两行或者三行的容器，想要纯用css实现这个方法，是没办法做到的。

可以提供两种方法，一是用程序输出时截字，二是用js判断字数截取。

JS的demo如下：






Examples

.demo{width:100px;}



怎么显示两行或三行文字，然后多出的部分省略号代替?

回答2：

在样式表中加入：overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用

回答3：

这个可以用列表来实现

回答4：

最简单的方法就是：

回答5：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;