使用pre标签显示原始文本并自动换行

最近的一个问题

最近做的后台系统有反馈说标题中间的多个空格变成了一个，导致复制标题去搜索文本搜不到。
比如无糖 依然透心凉 中间有两个空格，显示在网页上变成了无糖 依然透心凉。

发现是受css属性white-space影响：

1. normal: 默认属性。将连续的多个空格合并
2. pre：保留原始文本的空格和换行符，效果同pre标签
3. nowrap：强制在同一行显示所有内容

解决

只需要增加一个这样的css样式即可

.pre {
  white-space: pre-wrap;      /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since1999 */
  white-space:-pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /*Opera 7 */
  word-wrap:break-word;       /* Internet Explorer 5.5+ */
}