iView的Poptip气泡提示内容被截断,怎么调整样式?

码农致远 阅读 21

我在用iView的Poptip做表单校验提示,内容超过两行会被截断显示省略号。试过给.content样式加overflow:hidden和text-overflow:clip,但没生效。


.ivu-poptip-content {
  max-width: 200px;
  word-wrap: break-word;
  white-space: normal !important;
}

还发现当内容有换行符时,气泡高度固定不变。检查过层级没问题,是不是要改.poptip-inner的padding?或者需要通过transfer属性解决?

我来解答 赞 8 收藏
二维码
手机扫码查看
1 条解答
FSD-鑫平
试试这个方法:

给Poptip加个class比如.full-poptip,然后这样写样式:

.ivu-poptip {
&.full-poptip {
.ivu-poptip-content {
max-width: none;
white-space: pre-wrap;
word-break: break-all;
}
.ivu-poptip-inner {
padding: 8px 12px;
}
}
}


同时设置属性:


内容里的换行要用n,这样就能正常撑开高度。transfer属性很关键,不加的话样式会受父元素限制。

我记得这问题踩过坑,主要就是三个点要同时满足:
白空格用pre-wrap
关闭max-width限制
必须用transfer脱离当前容器

你之前的样式里可能少了transfer属性,导致样式改了但没生效。
点赞 6
2026-02-06 15:15