Bootstrap

iview Poptip组件,内容超出固定宽度不换行,解决方法

bug场景:

今天在做表格内容超出时,鼠标滑过进行tip提示,选用的是Poptip组件,设置了width='350'和word-wrap=true,输入过多数字或字母,发现内容不换行,打开控制器,发现设置的word-wrap属性没有生效

在这里插入图片描述

原因分析:

输入过多的汉字则可以正常换行,因此,给 Poptip 设置 class-name='popTipSty',设置css属性 word-break: break-all;允许在单词内换行,这样,不管内容为数字、字母、汉字,超出时都可以换行

解决方案:

<style>
.popTipSty .ivu-poptip-inner{
  word-break: break-all;
}
</style>
;