单行文字溢出用省略号隐藏的样式有问题

设置单行文字溢出用省略号隐藏无效

表格单行文字溢出的部分要用省略号隐藏掉,已经设置了相关的样式,样式代码如下

img

但是在页面中只是粗暴地将溢出的部分截掉,完全没有省略号

img

这到底是怎么回事?

代码没啥问题,需要注意的是 不能是 display:flex;

发一下html代码,可能是html代码的问题,样式我按照你的写是可以实现的。

img

是不是行内元素,设置宽不起作用导致的;
如果用的是el-table,可以用 show-overflow-tooltip

源于chatGPT仅供参考


根据您提供的样式代码,可以看出您使用了 flex-wrap 属性,但是在单行文本溢出的情况下,flex-wrap 并不适用。请尝试将该属性移除,只保留以下样式:

css
.overhide {
  max-width: 10ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
这样应该能够正确地将表格中单行文字溢出的部分用省略号隐藏起来。

如果问题仍然存在,请确保 .overhide 类名被正确应用到需要隐藏溢出文字的表格元素上,并检查是否有其他 CSS 样式可能会影响到该元素的显示效果。

如果您还有其他问题,请提供更多相关代码或详细说明,以便我进一步帮助您。

溢出显示省略号分为单行和多行的情况,具体可参考这个文章试试:

max-width:设置小点试试 如果 可以说明设置的有点 大