CSS：换行文字 tag break words issue

Question

我使用Laravel和CSS Bootstrap。我将文本保存到字段名称（文本数据类型）。当我在<pre>标签包装中使用下面的CSS显示它时，我得到的问题文本被分解成片段，对于<pre>末尾的每个单词，如图中所示。

这是我使用的CSS，导致这个问题：

.myclass pre {
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;
}

Answer 1

请将display: inline-block添加到pre标签中，以便自动换行。

所以你的代码变成：

.myclass pre {
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;
  display: inline-block;
}