HTML <pre>标记值获取水平滚动条,如何格式化？

Question

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

Answer 1

有几个解决方案:

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

另一种是white-space:pre-wrap;在CSS中使用你的<pre>标签.这将导致文本根据需要换行到新行,但仍保留源中存在的所有空格.有关此CSS属性的更多信息,请参见http://www.w3schools.com/cssref/pr_text_white-space.asp.

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

• overflow-x:hidden;这将简单地切断超出右边缘的文本.它根本不可见.
• overflow-x:scroll;当文本超出右边缘时,这将导致滚动条显示在您的网页中.这将阻止整个页面变得如此宽,以至于滚动条出现在底部.有关示例,请参阅http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow-x&preval=scroll.

Answer 2

添加样式：

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