如何用HTML和Bootstrap实现表格文本适配屏幕自动换行

我在用Flask、MongoDB、HTML和Bootstrap开发Web应用时碰到个问题：表格列里的文本太长，超出屏幕后得横向滚动才能看全。试了好几种Bootstrap的布局类都没解决，可要是把包裹文本的<pre>标签去掉，MongoDB里存的文本自带的换行格式就丢了。

后来试出来个可行的方案：给文本外层套一个带white-space:pre-wrap样式的<div>标签，既能让文本自动换行适配屏幕宽度，又能完整保留原文本的换行格式。

示例代码：

<!-- 替换原来的<pre>标签写法 -->
<div style="white-space: pre-wrap;">{{ item.content }}</div>

如果想复用样式，也可以在CSS里定义类：

.pre-wrap {
  white-space: pre-wrap;
}

然后页面里这么用：

<div class="pre-wrap">{{ item.content }}</div>

内容的提问来源于stack exchange，提问作者Whatever22