如何配置<pre>元素实现长行断词换行且自适应最长行宽度？

元素同时实现断词换行与宽度自适应的问题 #

要让

既能够在内容超长时自动断词换行，又能在内容较短时收缩到最长行的宽度，你可以用以下CSS配置替代原来的方案：
pre {
  background-color: silver;
  border-radius: 1em;
  padding: 2em;
  /* 核心样式 */
  width: fit-content;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-all;
}
为什么原来的方案会失效？ #
你之前用width: min-content配合断词样式时，word-break: break-all会让浏览器认为单个字符就是最小的可换行单元，所以min-content的计算结果就变成了单个字符的宽度，导致
收缩到异常窄。
各属性的作用： #
width: fit-content：让
的宽度默认等于内容最长行的自然宽度（无换行时的宽度），同时不会超过父容器的可用空间
max-width: 100%：限制
的最大宽度不超出父容器，触发超长内容的换行逻辑
white-space: pre-wrap：保留
原有的换行和空格格式，同时允许长行自动换行（兼容性比break-spaces更好，效果一致）
word-break: break-all：针对无空格的超长字符串（比如堆栈跟踪里的路径、哈希值），强制在任意字符位置换行，避免横向滚动
示例代码验证 #
<h3>短内容（自动收缩）</h3>
<pre>0123456789</pre>

<h3>超长无空格内容（自动换行）</h3>
<pre>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</pre>

<h3>带换行的堆栈跟踪内容（保留格式+自动换行）</h3>
<pre>Error: Something went wrong
    at Object.<anonymous> (/path/to/very/long/file/name/that/will/wrap/automatically.js:12:3)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)</pre>
内容的提问来源于stack exchange，提问作者OPPenguin