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

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

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

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

 

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

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

<el-table-column :label="tableColLabel['exceptionMsg']" min-width="150">
	<template slot-scope="props">
		<el-popover placement="bottom"
			title="异常信息"
			width="600"
			trigger="click"
			content="">
			<div class="divcss555">
				{{ props.row.exceptionMsg }}
			</div>
			<el-button slot="reference">点击查看详细</el-button>
		</el-popover>
	</template>
</el-table-column>

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

    <style>
        .divcss555 {
            border: 1px solid #F00;
            width: 600px;
            height: 100px;
            word-break: break-all;
        } 
    </style>

最后是效果展示

其他的换行也和这个相似