处理HTML中的空白字符

8 浏览
0 Comments

处理HTML中的空白字符

我想知道是否有一种技术可以在不影响HTML的可读性的情况下，去除在浏览器中显示的空白。例如，将HTML放在不同的行上（方便阅读和编辑）会在divs/spans/li之间创建不必要的空白，非常令人沮丧。我唯一能想到的解决办法是将所有HTML压缩成一行，但这样阅读、编辑和维护都会变成一场噩梦。请参考这些示例。

示例1中的HTML可读性较高，但由于不必要的空白，图片被推到第二行，这是不希望的。

示例2中的HTML都在一行上，阅读起来很痛苦，但输出结果是正确的。

我想知道是否有办法解决这个问题，还是说我只能接受这种情况？

对我来说，以下代码很难处理。

    texttexttext

0

2 答案

0 Comments

在处理HTML空白空间时，出现这个问题的原因是因为使用inline-block属性时，HTML标记之间的换行和空格会被渲染成可见的空白间隔，导致页面显示不符合预期。

解决这个问题的方法是使用注释来“删除”空白空间。可以在标记之间添加注释来替代换行和空格，从而达到去除空白间隔的效果。

以下是一个示例代码，展示了如何使用注释来处理HTML空白空间：

<div class="prodGrid">
    <div class="prod">
        <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />  
    </div><!--
    --><div class="prod">
        <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />  
    </div><!--
    --><div class="prod">
        <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />  
    </div>
</div>

这种方法虽然不够美观，但在目前还没有适用的CSS解决方案之前，我认为这是最好的方法。因为inline-block属性具有许多有用的特性，不应因为标记稍微复杂就放弃使用。

需要注意的是，如果采用这种方法，要小心IE7的兼容性问题。这个浏览器存在一个bug，会将注释解释为DOM元素。因此，如果使用了一些稍微复杂的选择器，可能需要将所有标记都放在一行上。

感谢，这种方法很有效。这是一个奇怪的问题，不知道以后会不会有所改变。

根据规范来看，这种行为不太可能改变（这种行为在规范上是正确的，并且在某种程度上也是有道理的）。但是未来可能会引入新的text-space-collapse属性，让我们更轻松地处理这个问题。

0
0 Comments

解决HTML空白问题的原因是因为在设置img标签的vertical-align属性时，出现了一些问题。为了解决这个问题，有两种解决方法。

第一种方法是在.prod img中添加vertical-align:top;来设置img标签的vertical-align属性，如下所示：

.prod img{vertical-align:top;}

你可以点击这里查看演示。

第二种方法是设置.prodGrid的font-size属性为0，如下所示：

.prodGrid{font-size:0;}

你可以点击这里查看演示。

然而，第一个演示中的所有内容仍然在一行中，所以这并不是一个真正的解决方法。将font-size设置为0确实解决了问题，但是你还需要为子元素重新设置font-size（因为未来可能需要添加文本）。

另外，当你想要添加文本时就会出现问题。这些

标签需要包含文本，所以将font-size设置为0后，你还需要为任何或

等元素设置字体大小，这样会显得有些繁琐。

解决HTML空白问题的每种方法都有一些局限性，但是这个问题的解决方法都是一种折中的办法。

0