CSS：换行文本<pre> tag break words issue

Question

I use Laravel with CSS Bootstrap. I save the text into the field name (text data type). When I show it in <pre> tag wrap with below CSS, I got problem text are unwanted broken down into piece for every words that comes at the end of the <pre> as in this image.

And here is the CSS I used, which cause this problem:

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