后端返回什么格式 前端显示的就是什么格式

加个样式就好了：
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;

不加上面的样式的话，页面渲染就是这样。

加完以后的样式就是下图：

补充：

`<div style="height:calc(100% - 120px);" class="console overflowAuto p-10">
	<pre v-html="runDataResults"></pre>
</div>`

this.runDataResults = res.data.console;

.console {
  border: 1px solid #999999;
  margin-top: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.overflowAuto {
	overflow-y: auto;
}
.p-10{
	padding:10px;
}

1. word-break:break-all;只对英文起作用，以字母作为换行依据
2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据
3. white-space:pre-wrap; 只对中文起作用，强制换行
4. white-space:nowrap; 强制不换行，都起作用
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）

代码：
.p1{ word-break:break-all; width:150px;}/*只对英文起作用，以字母作为换行依据*/
.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用，以单词作为换行依据*/
.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用，强制换行*/
.p4{white-space:nowrap; width:10px;}/*强制不换行，都起作用*/
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}／/*不换行，超出部分隐藏且以省略号形式出现*/