如何让div中的文字只显示一行，多余的文字隐藏并加上省略号

Posted 2023-04-23

参考技术A 你可以吧...7890看成两个部分，省略号是一个标签，数字是一个标签然后组合在一起。把后面数字的标签长度限制死，超出部分不显示就把问题解决了。

html 文字只显示一行，且隐藏多出来的文字

参考技术A  /*一行表示**/
     overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/***2行表示**/
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

参考技术B 给容器定一个高度，宽度，设置overflow:hidden;追问

对div设置了高度和宽度，里面包含了超链接，但是超链接文字太多，想让出现在同一行，是在css里进行设置，还是在div中直接设置，代码怎么写？你说的这个我用了，不起作用。麻烦你了，谢谢！

追答

如果超出的想以省略号代替的话

<div><a href="#">链接文字内容链接文字内容链接文字内容链接文字内容</a></div>

divwidth:40px;height:20px;overflow:hidden;text-overflow:ellipsis;white-space:norwap;

这样就可以了。

如果不想出现省略号，仅仅让隐藏

divwidth:40px;height:20px;overflow:hidden;word-break:break-all;word-wrap:break-word;

至于多行的出现省略号，因为有浏览器不兼容的情况，所以可以参考上面被采纳的答案。

参考技术C 可以发出来看一下吗？是不是你代码错了