html - 在 或标题中时，我们应该在 标签周围使用空格吗？

Question

我正在使用 <br>标题内的标签(例如 h1 )，并且作为渐进式增强的响应式设计的一部分(这会是一个异常(exception)吗？)——我想将它隐藏在较窄的视口(viewport)中。

自然地，CSS 规则是:

h1 br {
    display: none;
}

但是在 HTML 中处理这个问题的正确方法是什么？

如果这样说，那么当br是隐藏的，“heading”和“with”之间没有空格:

1) <h1>Example heading<br>with a break right thurr</h1>

那么下面的语义正确吗？

2) <h1>Example heading <br>with a break right thurr</h1>

或者这个呢？

3) <h1>Example heading<br> with a break right thurr</h1>

非常挑剔，我知道，但我很想听听。

附言在这种情况下，绝对必须使用 br因为“Example heading”一词比“with a break right thurr”短——使用流体容器会强制在不需要的地方中断。

此外，正如 David 指出的那样，示例 #2 和 #3 都可以工作——但它们在语义上是否正确？虽然 HTML 标签周围的空格是语义的并且会被忽略(这就是我们使标记易于阅读的方式)......但是元素标签内的空格呢？他们应该在那里吗？

Answer 1

我认为您使用了 br element是不正确的。它必须仅在换行有意义时使用，而不是出于布局目的:

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

您应该改用 span 元素:

<h1>Example heading <span>with a break right thurr</span></h1>

回复

<h1><span>Example heading</span> with a break right thurr</h1>

像这样的 CSS:

h1 > span {display:block;}

所以现在也没有问题把空间放在哪里。如果使用 br，决定在哪里/是否使用空格应该没有问题，因为它必须是有意义的中断(不一定是换行符)，所以总会有一个分隔符某种形式(换行符、定界字符/图形、口头停顿等)