CSS文本内容换行

显示文本内容换行问题探究

<pre>我是一个很长的字符我想要换行展示，否则的话，就会出现水平的横向滚动条，用户体验很不好</pre>

问题

1. 想要让pre标签的文本内容根据外层容器的宽度换行展示。
2. 后端响应文本中带有\n的换行符也要能正常换行展示。

因为文本中的\n是能够正常换行的，原本是想，自己对后端数据进行加工，前端自行添加\n，达到换行的效果，后来发现，因为后端也有自己的\n，有序列表很短的一句话也要添加\n，需要考虑的因素，还蛮多的，js逻辑不是很好写。
其实说了这么多，用两句css就能解决。
言归正传
我先看了word-break：指定了怎样在单词内断行。将其设置为 break-word 将在文本可能溢出其容器的确切位置创建一个断点。

好烦这种添加了，属性，没有效果变化！继续查，又看到了一个属性white-space：设置如何处理元素中的空白。设置为pre-wrap表示 连续的空白符会被合并。在遇到换行符或者
元素，或者需要为了填充「行框盒子 (line boxes)」时会换行。刚好如何填充盒子和遇到\n换行的要求。
至此也就大功告成了。