Element不能自动换行,内容依然超出,直到遇见空格自动换行

我一个前端技术小白,不会前端,没办法,只能使用别人做好的框架。

在最近项目使用Element,需求是要显示日志,日志表格中显示一串SQL。但是,在使用过程中,发现字符串过长,表格显示起来不美观,便用了“show-overflow-tooltip”,但是字符串过长,并没有自动换行。我就改用了弹出框, 对话框, 展开行等方式展示数据,字符串还是如此。如上图所示一样,理想上显示在细线范围的弹出框中,但现实却是字符串没有空格不能自动换行。

问题展示: 点击 “异常信息”下的“点击查看详细”按钮,弹出的“弹出框”中内容有超出。细线方框为理想状态,粗线方框为现实状态。

Element不能自动换行,内容依然超出,直到遇见空格自动换行_第1张图片

 

Element不能自动换行,内容依然超出,直到遇见空格自动换行_第2张图片

解决:在弹出框中加入了一个div,并设置div属性为强制换行。下面贴上代码。

下面为 html代码:在显示“弹出框”中,将要显示的内容包裹在 div 中


	

下面是js代码,设置 div 强制换行

    

最后是效果展示

Element不能自动换行,内容依然超出,直到遇见空格自动换行_第3张图片

其他的换行也和这个相似

你可能感兴趣的:(web)