HTML <pre> tag values get horizontal scroll bars,how to format it?</pre>

Question

这是我的博客页面。我的一些帖子有C#个代码块。为此，我使用<'pre'>标签。 pre标记宽度为100％，并且具有背景颜色。但是，文字远离它，如下图所示。我怎么能克服这个？我不想要底部滚动条。

Answer 1

有一些解决方案：

最简单的方法是在文本中放置换行符。这可能不是你想要的，因为它会留下较大的右边距或仍然导致滚动条，除非浏览器窗口的大小合适。

另一种方法是在white-space:pre-wrap;标记的CSS中使用<pre>。这将导致文本根据需要换行到新行，但仍保留源中存在的所有空格。有关此CSS属性的详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/white-space。

或者，如果您不想添加任何换行符（手动或通过自动换行），您可以为<pre>标记使用以下CSS属性之一：

• overflow-x:hidden;这将简单地切断超出右边缘的文本。它根本不可见。
• overflow-x:scroll;这会导致滚动条显示在您的网页中，以防文字延伸到右边缘。这将阻止整个页面变得如此宽，以至于滚动条出现在底部。有关示例，请参阅http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow-x&preval=scroll。
• overflow-x:auto;与overflow-x:scroll;类似，但只有在需要时才会显示滚动条。 （感谢评论中的ccalvert）

Answer 2

您可以使用一些CSS属性：

pre {
display: flex;
white-space: normal;
word-break: break-word;
}

如果<pre>位于<span>内，则可选：

span pre { display: inline-flex; }

Answer 3

添加样式：

pre { 
    white-space: pre-wrap; 
    word-break: break-word;
}

Answer 4

我的行包含在<a>标记中。这对我有用：

a, pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}