HTML <pre> 标签导致换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4233869/
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 causes linebreaks
提问by monojohnny
I'm using CSS (via JQuery , but not relevant to this question) to highlight certain elements within an HTML file: I'm using "pre" tags to separate out logical elements in my file, but I noticed that "pre" tags seem to leave newlines between elements.
我正在使用 CSS（通过 JQuery，但与此问题无关）来突出显示 HTML 文件中的某些元素：我使用“pre”标签来分隔文件中的逻辑元素，但我注意到“pre”标签似乎在元素之间留下换行符。
Can I get rid of these using CSS ?
我可以使用 CSS 摆脱这些吗？
(Or what shall I use instead of "pre" tags? The text elements may contain HTML elements themeselves : which should notbe rendered, and should be shown literally as source-code: hence my initial choice with "pre" tags)
（或者我应该用什么来代替“预”标签的文本元素可以包含HTML元素themeselves：应该不被渲染，而应该从字面上显示为源代码：因此，我用最初的选择“预”标记）
Here's an example of the HTML I'm using: (Requires http://docs.jquery.com/Downloading_jQueryfor this example)
这是我正在使用的 HTML 示例：（此示例需要http://docs.jquery.com/Downloading_jQuery）
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js">
</script>
</head>
<body>
<pre class="error">
This is an error line.
stack.trace.blah.blah
more.blah.blah
yadda.yadda.blah</pre>
<pre class="ok">
this is not an error line.it contains html
<html><head></head><body>hello</body></html></pre>
<pre class="error">
This is an error line.
stack.trace.blah.blah
more.blah.blah
yadda.yadda.blah</pre>
<pre class="ok">
<script type="text/javascript">
$("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
</script>
</body>
</html>
I'm using Firefox 3.6.12.
This is what the code above results in:
我正在使用 Firefox 3.6.12。这就是上面代码的结果：
And this is simulated output of what I want (switched to yellow, only because I used my vim editor to this, pretend it's red!)
这是我想要的模拟输出（切换到黄色，只是因为我使用了我的 vim 编辑器，假装它是红色的！）
SOLUTION:
解决方案：
Is to use 'display:inline' for all PRE tags. (Previously I was only applying the 'display:inline' to the 'error' tags in the example above, and had forget to do the same for 'ok' pre tags.
是对所有 PRE 标签使用 'display:inline'。（以前我只是将 'display:inline' 应用于上面示例中的 'error' 标签，而忘记对 'ok' pre 标签执行相同操作。
回答by Razor
That's because <pre>has a default style display: block, use in your css pre { display: inline}
那是因为<pre>有一个默认样式display: block，在你的 css 中使用pre { display: inline}
as for your edit, you need to add margin: 0;to ALL the pre blocks, not just the ones you want to style:
至于您的编辑，您需要添加margin: 0;到所有预块，而不仅仅是您想要设置样式的块：
pre {
display: inline;
margin: 0;
}
You should try to avoid styling with JS whenever possible, but if you really must:
您应该尽可能避免使用 JS 进行样式设置，但如果您真的必须：
<script type="text/javascript">
$("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
$("pre").css({ "margin" : 0, "padding" : 0 })
</script>
回答by hollsk
The pre tag is a block level element, so it will behave like any other block level element and stack vertically (like paragraph, div, etc). You can set it to display:inline instead, I guess.
pre 标签是一个块级元素，因此它的行为与任何其他块级元素一样并垂直堆叠（如段落、div 等）。我想你可以将它设置为 display:inline 。
But better would be to use the <code>tag, which is inline by default.
但更好的是使用<code>默认情况下内联的标签。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
回答by tshao
You can force the pre tag to be a inline element by adding this in head:
您可以通过在 head 中添加以下内容来强制 pre 标记为内联元素：
<style type='text/css'> pre {display: inline;} </style>
回答by QuyLT
You can fix with css as follow
您可以使用 css 进行修复，如下所示
pre {
width: 600px; /* specify width */
white-space: pre-wrap; /* CSS3 browsers */
white-space: -moz-pre-wrap !important; /* 1999+ Mozilla */
white-space: -pre-wrap; /* Opera 4 thru 6 */
white-space: -o-pre-wrap; /* Opera 7 and up */
word-wrap: break-word; /* IE 5.5+ and up */
}
回答by Eric
Why are you using jQuery for something that can be achieved via CSS?
为什么要使用 jQuery 来实现可以通过 CSS 实现的功能？
<html>
<head>
<style type="text/css">
pre {
display: block;
padding: 0;
margin: 0;
}
pre.error {
background-color: red;
color: white;
}
</style>
</head>
<body>
<pre class="error">
This is an error line.
stack.trace.blah.blah
more.blah.blah
yadda.yadda.blah</pre>
<pre class="ok">
this is not an error line.it contains html
<html><head></head><body>hello</body></html></pre>
<pre class="error">
This is an error line.
stack.trace.blah.blah
more.blah.blah
yadda.yadda.blah</pre>
</body>
</html>
回答by bkilinc
You can convert HTML source to use special chars instead of < >(like < >). You can do this with notepad++ using TextFX Plugin (Encode HTML) or in eclipse you can do this with anyedit tools.
您可以将 HTML 源代码转换为使用特殊字符而不是< >（如< >）。您可以使用 Notepad++ 使用 TextFX Plugin (Encode HTML) 或在 Eclipse 中使用任何编辑工具执行此操作。
回答by Sotiris
you can use padding:0and margin:0for prein css
你可以在 css 中使用padding:0and margin:0forpre
回答by GolezTrol
Don't use pre, instead escape the characters you want to display literally. Like <and >for <and >.
When you render your page, you can use a function like htmlentities()(PHP) to escape these characters for you.
不要使用 pre，而是转义要按字面显示的字符。喜欢<和>为了<和>。渲染页面时，您可以使用htmlentities()(PHP) 之类的函数为您转义这些字符。
回答by Ms2ger
pre { margin: 0; }
should give you the rendering in the second picture. Your snippet probably doesn't work because you don't remove the default margin from the pre.ok.
应该给你第二张图片中的渲染。您的代码段可能不起作用，因为您没有从pre.ok.
