HTML <pre>标记会导致换行符
mon*_*nny 13 html css newline line-breaks pre
我正在使用CSS(通过JQuery,但与此问题无关)突出显示HTML文件中的某些元素:我使用"pre"标签来分隔我文件中的逻辑元素,但我注意到"pre"标签似乎在元素之间留下了新的界限.
我可以使用CSS摆脱这些吗？
(或者我应该使用什么而不是"pre"标签？文本元素可能包含自己的HTML元素:不应该呈现,并且应该按字面显示为源代码:因此我最初选择"pre"标签)
这是我正在使用的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>
我正在使用Firefox 3.6.12.这就是上面的代码导致的结果:
这是我想要的模拟输出(切换到黄色,只是因为我使用了我的vim编辑器,假装它是红色的!)
解:
是对所有PRE标签使用'display:inline'.(之前我只是将'display:inline'应用于上面示例中的'error'标记,并且忘记对'ok'预标签执行相同操作.
Raz*_*zor 25
那是因为<pre>有一个默认样式display: block,在你的CSS中使用pre { display: inline}
至于你的编辑,你需要添加margin: 0;到所有的前块,而不仅仅是你想要的样式:
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>
pre标签是一个块级元素,因此它的行为与任何其他块级元素一样,并且垂直堆叠(如段落,div等).您可以将其设置为显示:内联,我猜.
但更好的方法是使用<code>标签,默认情况下是内联的.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
- 实际上，“代码”标签似乎更难使用：它去除了前导空格，而 pre 是（对我来说是正确的）保留它们。 (2认同)
| 归档时间： |
|
| 查看次数： |
33072 次 |
| 最近记录： |