Wrapping 到固定宽度，以使每行的字符长度相同

Question

我正在尝试包裹这个长的<pre>，以便它形成一个矩形（而不是具有我得到的“锯齿状”结尾）。我已经将white-space设置为pre-wrap，将word-break设置为break-all，就像other StackOverflow 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..|[email protected].&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中效果不佳。

pre {
  width: 300px;
  white-space: pre-wrap;
  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..|[email protected].&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>