1

我在<br>标题中使用了一个标签（例如h1），并且作为我的响应式设计的一部分，具有渐进增强功能（这会是一个例外吗？）——我想将它隐藏在更窄的视口上。

当然，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>

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

PS 在这种情况下，绝对必须使用 a br，因为“示例标题”比“with a break right thurr”要短——使用流体容器会在不需要的地方强制中断。

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

4

3 回答 3

7

我认为您对br元素的使用不正确。只有在换行符有意义时才必须使用它，而不是出于布局目的：

br元素只能用于实际上是内容一部分的换行符，如诗歌或地址。

您应该改用该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使用，决定在哪里/是否使用空格应该没有问题，因为它必须是一个有意义的中断（不一定是换行符），所以总会有某种分隔符（换行符，定界符字符/图形、口语停顿等）

于 2012-11-04T18:15:19.917 回答
2

我养成了一个习惯，总是在<br>

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

然后你有你的空白。

然而，unor 有一点：如果你不想在某些情况下打破那里，你不应该输入<br>if 你关心语义。

于 2012-11-04T18:42:00.640 回答
0

打破标题感觉有点奇怪 - 尽管我理解你的逻辑。

您是否会考虑将标题放在某个宽度的离散列中？

此外，如果您正在通过较小的屏幕设备阅读此内容，我假设您在@media only screen部分或类似内容中拥有此内容。

<br>写成<br />(self closing tag)会稍微好一些，但<br>如果在过渡文档或 html5 文档中也可以。

  1. 和 3. ; 语义正确性并没有真正涉及。该部分的语义是“这是一个顶部标题”；就空格甚至回车而言，如此微小的细节并没有特别重要。任何大于单个空格的空格都会被忽略，元素标签内的空格通常是不可取的。解析器将始终尽力而为（祝福他们......好吧，除了 IE），但如果您在公平的标签内占用空间，仍然会完全感到困惑。< p >例如，将被解释为左括号、字母“p”和右括号，而不是段落标记

还可以考虑使用<wbr>which 为更长的单词提供可选的分词。

于 2012-11-03T22:54:40.540 回答