HTML< pre>标签导致线突破 [英] HTML <pre> tag causes linebreaks
问题描述
我使用CSS（通过JQuery，但与这个问题不相关）突出显示HTML文件中的某些元素：我使用pre标签来分离出我的文件中的逻辑元素，但我注意到 pre标签似乎在元素之间留下换行符。
我可以使用CSS去掉这些吗？
（或者我应该使用什么代替pre标签？文本元素可能包含HTML元素themeselves：应该并且应该显示为源代码：因此我的初始选择与pre标签）
这里是我使用的HTML示例：（Requires http://docs.jquery.com/Downloading_jQuery for this example）
< html>
< head>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.4.4.min.js>
< / script>
< / head>
< body>
< pre class =error>
这是一个错误行。
stack.trace.blah.blah
more.blah.blah
yadda.yadda.blah< / pre>
< pre class =ok>
这不是一个错误line.it包含html
& lt; html& gt;& lt; head& gt;& lt; / head& gt;& lt; body& gt ; hello& lt; / body& gt;& lt; / html& gt;< / pre>
< pre class =error>
这是一个错误行。
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>
我使用的是Firefox 3.6.12。
这是上面代码的结果：
这是我想要的模拟输出（切换到黄色，只因为我使用我的vim编辑器，假装它是红色的）
解决方案： / p>
是对所有PRE标签使用display：inline。 （以前我只是应用'display：inline'到上面的例子中的'error'标签，并且忘了对'ok'pre标签做同样的事。
display：block ，在您的编辑中使用您的css pre {display：inline} ，您需要添加 margin：0; 到所有的pre块，而不只是你想要的样式：
code> pre {
display：inline;
margin：0;
}
你应该尽量避免使用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>
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.
Can I get rid of these using CSS ?
(Or what shall I use instead of "pre" tags? The text elements may contain HTML elements themeselves : which should not be rendered, and should be shown literally as source-code: hence my initial choice with "pre" tags)
Here's an example of the HTML I'm using: (Requires http://docs.jquery.com/Downloading_jQuery for this example)
<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:
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!)
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.
That's because <pre> has a default style display: block, use in your 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:
pre {
display: inline;
margin: 0;
}
You should try to avoid styling with JS whenever possible, but if you really must:
<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>
这篇关于HTML< pre>标签导致线突破的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
