white-space 让html页面换行

问题:后台返回给前端的字段中,比如:

"contents": "除夕更阑人不睡,厌禳钝滞迎新岁;\n小儿呼叫走长街,云有痴呆召人买。\n二物于人谁独无?就中吴侬仍有余;\n巷南巷北卖不得,相逢大笑相揶揄。\n栎翁块坐重帘下,独要买添令问价。\n儿云翁买不须钱,奉赊痴呆千百年。",

但在页面上显示时候,却没有分段。

处理办法:

1.添加 white-space:pre-line;属性


                            ${aBo.contents}
 

效果图:

white-space 让html页面换行_第1张图片

添加 white-space:pre-wrap;属性


                            ${aBo.contents}

效果图:

white-space 让html页面换行_第2张图片

为什么呢?

white-space的值:
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。
nowrap    文本不会换行,文本会在在同一行上继续,直到遇到 
 标签为止。
pre-wrap    保留空白符序列,但是正常地进行换行。
pre-line    合并空白符序列,但是保留换行符。
inherit    规定应该从父元素继承 white-space 属性的值。

你可能感兴趣的:(前端)