div内多行文字， 溢出部分用省略号显示

Posted 2023-04-23

目前遇到这种情况， div内有多行文字， div的长度和宽度都是固定的， 当文字内容大于溢出div时， 让溢出部分以省略号方式显示， 发帖希望得到纯CSS 解决方案， 暂时不想要jquery和伪代码的方式来解决， 有人遇到这种情况吗？

1、首先，显示标尺。正常情况直接见于word界面中上部。 2、光标停在公式所在的行，不要求行中的具体位置。 3、选择【格式】菜单中的-制表位(T)，在出现的对话框中设置你所需要的左制表位、右制表位、居中等，根据需要还可以设置前导符号(就像目录中页码前的省略号)。需要有点儿耐心，很快你就精通制表位的设置了。练习:设置一个左对齐的制表位为5个字符，一个右对齐的制表位为35个字符。清除不需要的制表位。 4、假设一行中有A、B两部分，在A、B之间加入一个TAB(按一下Tab键)，看一下效果。 学会之后，就可以灵活运用了。 参考技术A

可以,不过只适合WebKit浏览器。

在CSS样式中加入：

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: X; ————这个X表示要显示几行
-webkit-box-orient: vertical;
其中div的高度自己要规定好。

这个是单行的。

在CSS样式中加入

width:100px; //你所要的宽度
white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden;

参考技术B 也是这个问题，搞定了。
//单行
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
//多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;/*显示几行*/
overflow: hidden; 参考技术C

在CSS样式中加入

width:100px; //你所要的宽度
white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden;

追问

white-space:nowrap;
这个属性应该是不允许换行， 我现在是多行文字， 最后几行的文字可能会溢出，所以要将后面溢出的几行用省略号来显示   类似于我们经常百度

最后的省略号那样    另外-o-text-overflow:ellipsis;
 这个属性应该不是兼容所有浏览器的吧？

追答

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; //这个表示要显示几行
-webkit-box-orient: vertical;
其中div的高度自己要规定好
我也是搜索理解帮你的 其实我也不太懂这个- -。你试试可以不，能解决就好啦

追问

这些方法都已经尝试过， 好多私有属性是不满足浏览器兼容性的，不过还是非常感谢.... 貌似目前还没有纯CSS的解决方式？ 这应该是很常见的问题，不知道为什么没有答案。

追答

因为有js jquery等便利的工具 何必一直纠结着只用CSS呢？

多行文字溢出显示省略号

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

 

代码示例：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;  //这里是在第二行有省略号
overflow: hidden;