“pre”标签没有缩小。不显示水平滚动条答案

【问题标题】："pre" tag not shrinking. Not showing Horizontal scroll Bar“pre”标签没有缩小。不显示水平滚动条
【发布时间】：2016-12-30 14:09:52
【问题描述】：

我在我的网站上展示了很多代码。我网站的其余部分是响应式的，但“pre”标签拒绝缩小和显示水平滚动条。这是我的内容由于顶部的长“pre”标签而被截断的屏幕截图：

我正在使用overflow:horizontal，但您可以在示例中看到它不起作用。这是实际链接enter link description here

只要我切换主题，它就可以正常工作！我正在使用创世纪框架的子主题...

【问题讨论】：

【解决方案1】：

Pre 标记显示预先格式化的文本，并保留空格和换行符并且是固定的。声明空白正常或预包装。

pre {
white-space: normal;
}

【讨论】：

【解决方案2】：

您需要为元素分配宽度，以便内容可以溢出。例如，尝试设置width: 100vw，它会起作用。

如果您的前置标签在实际网站布局的两侧有边距/填充，请尝试width: calc(100vw - 40px)，而在此示例中，40px 与两侧边距 20 像素相关。用您自己的实际边距/填充替换它。

【讨论】：

您之前的评论有效（在您编辑之前！）。您使用了一个似乎可以解决问题的单位“vw”。将其设置为“500px”只会导致固定宽度，并且 pre 元素不会缩小超出该宽度。将您的评论改回“vw”，我将标记为已回答：D
一开始我想到了百分比，但这行不通，因为它的父级没有固定的宽度，也没有。 vw 似乎切断了短语（不会显示），而且似乎也是一种廉价的解决方法。但如果它对你有用，那就更好了。改回来了:)
是的，抱歉，没注意到。原始答案是width: 100vw。

【解决方案3】：

我不知道为什么没有人给出答案：

pre {
   white-space: pre-wrap;
}

如果没有足够的空间，它会保留行和单词，同时换行。

【讨论】：