Html <；预处理>；不需要时的文本换行

我在a中包含的网页上有一个面板“模型”和一个标签，因此：-

<div style="width: fit-content;">
    <pre style="background-color: #0D0D0D; color:Lime; max-width:85ch;">
        ...
    </pre>
</div>

...

这些标记中任何一行的最大字符数为80个字符，最大宽度设置为85ch

当网页宽度足够大而不能强制换行时，是什么原因导致此类文本在非换行点换行

仅供参考-应该是这样的：-

我认为失败的例子可能是因为用户将字体设置得更大（使用Ctrl++），但在我这样做时，字体仍然表现得很好，只有当浏览器窗口的大小不再足以容纳字体时才会换行

---

补充问题（答案可能相同）。是否有一种方法可以阻止它包装，即即使web浏览器的大小不足以容纳它？

尝试

项的样式

空白：pre，或项目
空白：前置行
这是一个副作用，或者是父级和子级字体之间的差异，或者是浏览器或您正在使用的其他CSS呈现
pre
元素的方式。可能的原因有很多，但最简单的解决方案是在
pre
本身上设置
max width
，而不是在包含
div的
上设置

div {
    font-family: sans-serif;
}
pre {
    font-family: monospace;
}

最大宽度为85个字符表示为该元素设置的任何字体（此处为无衬线字体）中
0
字符的宽度。由于
pre
的字体不同，因此其
0
字符的宽度不同。包含的父对象太窄，因此子对象会换行

如果需要将div折叠到子级的宽度，可以将其宽度设置为适合内容，或者根据上下文，通常可以使用
显示：内联块

如果这不是由您编写的CSS引起的，它可能类似于CSS重置或Normalize.CSS，它试图通过使用一种奇怪且从未解释过的将
pre
设置为
font-family:monospace，monospace
的方法来纠正浏览器在呈现
pre
大小时的不同方式

同样，最简单的解决方案是上面提到的，在
pre
元素本身上设置基于字体的最大宽度。
您是否尝试过使用
空白：nowrap
在你的CSS中？@konalion-我没有尝试使用nowrap，因为我对它的理解是“一系列的空格将折叠成一个空格。文本将永远不会换行到下一行。”我不想要前半部分。我现在刚试过，它把我所有的行连接到一行，删除了所有多余的空格，所以我绝对不想要它！刚刚尝试过空白：pre；然而，我感到惊讶的是，它实际上起了作用。这似乎是我问题的答案。不确定为什么空白：pre；不是标记的默认值。我没有重新设置“完整字段。然后按Enter”的中断。介意在jsbin.com中单独分享这个屏幕的所有代码吗？我的怀疑是，您可能需要空白：pre，但如果不看到代码中的空白序列，就很难知道这一点。多亏了你们提供的各种提示，我相信我已经发现了这个问题。我发现pre的默认样式包括空格：pre-line，当我为此创建一个使用空格：pre的新类时，它起了作用。另外，我要感谢@Justin向我介绍了标签（他在编辑我的问题时使用了标签）。直到现在我才意识到他们的存在！你在网上学到的东西真是太棒了！！谢谢@DDan。我将接受你的回答——我的问题是我有空白：行前；在CSS中进行预处理。当我为我的面板创建一个带有空白的新类时：pre；这一切都按照我的预期进行了。谢谢@denmch，这可能会解决我未问到的问题-即，当我每行最多有80个字符时，我使用最大宽度：85ch的原因。干杯
div {
    font-family: sans-serif;
}
pre {
    font-family: monospace;
}