的问题

在显示代码段时，它会在实际内容之前和之后显示空白区域。如何在代码段之前和之后删除这些空格。

Answer 1

删除预标记内的空格。

示例：

<pre>
  This is a test.

  We want a new line here.
</pre>

应该是

<pre>This is a test.

We want a new line here.</pre>

Answer 2

如果您想使用其功能，则不再支持HTML 5预标记。像这样创建自己的css类......

.pre
{
border: 1px solid #999;
page-break-inside: avoid;
display: block;
padding: 3px 3px 2px;
margin: 0 0 10px;
font-size: 13px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
/*white-space: pre;
white-space: pre-wrap;*/
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 12px;
color: #333333;
}

.pre code
{
    padding: 0;
    color: inherit;
    white-space: pre;
    white-space: pre-wrap;
    background-color: transparent;
    border: 0;
}

取消/*white-space: pre; white-space: pre-wrap;*/会使您的空白区域像div一样工作。将它用作一个类，为你的元素提供相同的外观。

Answer 3

<pre>标记用于预格式化文本。这意味着您需要自己进行格式化 - 所有，包括确保空格正是您想要显示的内容。不要在<pre>标记与其中的内容之间输出多余的空格。

Answer 4

您需要确保代码格式正确，pre标签告诉浏览器在“按原样”显示前面的文本。

我自己发现有用的一件小事是使用这个php导入文件，所以我不必一直剪切和粘贴。

<?php
$file = "code/hello_world.c";
print "<p>Filename: <a href=\"".$file."\">".$file."</a></p>\n";
print "<div class=\"codebox\"><pre>\n\n";
$lines = file($file); foreach ($lines as $line_num => $line)
{ 
    echo htmlspecialchars($line) . ""; 
}
print "\n</pre></div>\n";
?>

然后让它看起来像我在我的CSS中添加它的代码

PRE {
    font-family:    'Monotype.com', Courier New, monospace;
    font-size:  0.7em;
}

.codebox {
    width: 90%;
    background-color: #000000;
    color: #FFFFFF;
}

.codebox pre {
    margin:      0 0 0  20px;
}

也许你觉得它很有帮助。

使用预标签时出现问题

的问题

4 个答案: