0

我正在做一个项目，我需要在网页上显示一些 XML。我正在尝试使用不同 xml 参数的各种跨度标签对 XML 进行颜色编码。

它的工作量更少，但为了保持代码整洁，我将每个标签放在一个新行上。这是一种工作，因为每个标签都保持在同一行，这是我想要的，除非我放一个<br />标签，但它在每个跨度标签之间放置一个空格。

例如，我的 XML 显示为

<  Application  x  :  Class  ="YourApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

而且我要

<Application x:Class="YourApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

以下是我尝试在我的 HTML 中编写代码的方式

<div class="codeBlock">
                        <span class="stringAndOperands"><</span>
                        <span class="xmltag">Application</span>
                        <span class="xmlParameter">x</span>
                        <span class="stringAndOperands">:</span>
                        <span class="xmlParameter">Class</span>
                        <span class="stringAndOperands">="YourApp.App"</span><br />
                        <span class="xmlParameter">xmlns</span><span class="stringAndOperands">="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span>
                    </div>

下面是我的 CSS

.xmltag
{
   color: #a31515;
   white-space: pre;
}

.stringAndOperands
{
    color: #0034ff;
    white-space: pre;
}

.xmlParameter
{
    color: #ff0000;
    white-space: pre;
}

.codeBlock
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    background-color: #cdcdcd;
    font-family: courier new;
    padding: 5px;
}

当跨度位于不同的行时，如何删除空格。我知道我可以将每个跨度放在同一行上会防止这种情况发生，但这会使我的源代码看起来有点乱。

感谢您的任何帮助，您可以提供。

4

2 回答 2

1

您真的不能，HTML 会自动将换行符解释为单个空格。您基本上需要将它们全部放在标记中的同一行，以便真正没有空白。

但是，您可以使用 CSS 来破解它。如果您font-size: 0px在.codeBlockdiv 和font-size: 12px/或span空白上设置任何内容，则不会占用任何空间，它将解决您的问题，假设您没有.codeBlock包含在span元素中的文本。

JSFiddle 示例

于 2013-09-26T20:23:21.090 回答
0

您可能需要确保使用重置来去除任何填充、边距等。 span {margin: 0;padding: 0;border: 0;outline:0;vertical-align: baseline;}

于 2013-09-26T20:46:08.307 回答