解决倒引号字符串内 换行失败的问题

示例代码如下:

<div class="resultArea">
   <div>{{str}}</div>
</div>
str += `每人公共区域费用:${difference}÷${this.tableData.length}=${perPeopleFree}(元)
`;

如果该段代码拼成的字符串str需要显示, 在显示时不换行。解决方法:

加上

.resultArea{
  /* 字符串换行 */
  white-space:pre-wrap;
}

即可解决问题。

white-space 属性设置如何处理元素内的空白。

默认是normal,空白会被浏览器忽略。

pre-wrap:保留空白符序列,但是正常地进行换行。

pre是preserve(保留)的意思。

原文地址:https://www.cnblogs.com/luoyihao/p/14430362.html