CSS: 换行 <pre> 标签断词问题

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;
}

CSS: 换行 <pre> 标签断词问题

CSS: wrap text <pre> tag break words issue

css

text

word-wrap

laravel