HTML <pre> 标签值获取水平滚动条，如何格式化？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13676587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML <pre> tag values get horizontal scroll bars,how to format it?
提问by Elshan
This is my blog page. Some of my posts have C#code blocks. For this, I use <'pre'>tags. pretag width is 100% and it has a background color. However, the text went away from it as in the below picture. How can I overcome this? I don't want bottom scroll bar.
这是我的博客页面。我的一些帖子有C#代码块。为此，我使用<'pre'>标签。pre标签宽度为 100%，并具有背景颜色。但是，如下图所示，文本从它那里消失了。我怎样才能克服这个问题？我不想要底部滚动条。
回答by Dominick Pastore
There are a few solutions:
有几种解决方案：
The simplest is to place line breaks in the text. This probably is not what you want though, since it will either leave large right margins or still cause scroll bars, unless the browser window is just the right size.
最简单的方法是在文本中放置换行符。不过，这可能不是您想要的，因为它会留下较大的右边距或仍会导致滚动条，除非浏览器窗口大小合适。
Another is to use white-space:pre-wrap;in the CSS for your <pre>tag. This will cause the text to wrap to a new line as necessary, but still preserve all whitespace present in the source. See https://developer.mozilla.org/en-US/docs/Web/CSS/white-spacefor more information about this CSS property.
另一个是white-space:pre-wrap;在 CSS 中为您的<pre>标签使用。这将导致文本根据需要换行，但仍保留源中存在的所有空白。有关此 CSS 属性的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/white-space。
Alternatively, if you do not want any line breaks added (either manually or through automatic word wrap), you can use one of the following CSS properties for your <pre>tag:
或者，如果您不想添加任何换行符（手动或通过自动换行），您可以为您的<pre>标签使用以下 CSS 属性之一：
overflow-x:hidden;This will simply cut off the text that extends past the right edge. It will not be visible at all.overflow-x:scroll;This will cause scroll bars to appear within your webpage in case text extends past the right edge. This will prevent the entire page from getting so wide that scroll bars appear at the bottom. See http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow-x&preval=scrollfor an example.overflow-x:auto;Likeoverflow-x:scroll;except the scrollbars only appear if required. (Thanks ccalvert in the comments)
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）
回答by Rayees Pk
add style:
添加样式：
pre {
white-space: pre-wrap;
word-break: break-word;
}
回答by Tinmarino
My lines are contained in <a>tags. This works for me:
我的台词包含在<a>标签中。这对我有用：
a, pre {
white-space: pre-wrap;
word-wrap: break-word;
}
回答by Harry Martel
You could use some CSS properties:
您可以使用一些 CSS 属性：
pre {
display: flex;
white-space: normal;
word-break: break-word;
}
Optionally, if <pre>is inside <span>:
可选，如果<pre>在里面<span>：
span pre { display: inline-flex; }
