将 <pre> 换行到固定宽度，使每一行的字符长度相同

Question

我试图将这么长的 <pre> 包裹起来，使其形成一个矩形（而不是我得到的 "jagged" 结尾）。我已将 white-space 设置为 pre-wrap 并将 word-break 设置为 break-all 就像 other Whosebug posts 所建议的那样，但浏览器似乎仍在应用一些启发式方法断线。

我无法先验地将 <pre> 分成几行，因为内容的长度以及 <pre> 的宽度都可能是动态的。

pre {
  width: 300px;
  white-space: pre-wrap;
  word-break: break-all;
}

<pre>ER..............................3......|..f1.f1.fSfQ.W....R..|.........K...R.A..U1.0....r...U.u....t.f.....B....1.ZQ....[...@P..?Q..SRP..|...f....D.....f@.....f.&gt;@|..xpu....{.D|.....isolinux.bin missing or corrupt...f`f1.f...{f...{fRfP.Sj.j...f.6.{.........6.{....A......{...d.fa....Operating system load error...^....&gt;b.....&lt;.u........................</pre>

我有：

我想达到的目标：

Answer 1

line-break: anywhere; 在 Chrome (Canary) 和 Firefox 中运行良好，但在 Edge 中运行不佳。如果内容包含空格，您也应该使用 white-space:break-spaces 而不是预换行。

pre {
  width: 300px;
  white-space: break-spaces;
  line-break: anywhere;
}

<pre>ER..............................3......|..f1.f1.fSfQ.W....R..|.........K...R.A..U1.0....r...U.u....t.f.....B....1.ZQ....[...@P..?Q..SRP..|...f....D.....f@.....f.&gt;@|..xpu....{.D|.....isolinux.bin missing or corrupt...f`f1.f...{f...{fRfP.Sj.j...f.6.{.........6.{....A......{...d.fa....Operating system load error...^....&gt;b.....&lt;.u........................</pre>

将 <pre> 换行到固定宽度，使每一行的字符长度相同

Wrapping <pre> to a fixed width such that each line is the same length in characters

html

css

whitespace

pre

word-wrap