我们是否应该在<p>或标题内使用周围的空格？</p>

Question

我在标题中使用了<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>

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

P.S。在这种情况下，绝对必须使用br，因为单词“示例标题”比“使用右侧thurr”短 - 使用流体容器会在不需要的地方强制中断。 / p>

另外，正如大卫指出的那样，＃2和＃3都可以使用 - 但它们在语义上是否正确？虽然HTML标签周围的空格是语义的并且被忽略（这就是我们如何使标记很好阅读）......但是元素标签内的空格呢？它们应该在那里吗？

Answer 1

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

  

br元素必须仅用于实际上是内容的换行符，如诗歌或地址。

您应该使用span元素：

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

RESP。

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

使用CSS：

h1 > span {display:block;}

所以现在也没有问题放在哪里。如果使用br，那么决定在何处/何时使用空格应该没有问题，因为它必须是一个有意义的中断（不一定是换行符），所以总会有某种分隔符（换行符，分隔字符/图形，语音暂停等）

Answer 2

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

之后回来

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

然后你有空白。

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

Answer 3

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

您是否可以考虑将标题放在一定宽度的离散列中？

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

将<br>写为<br />（自闭标记）会稍微好一点，但如果是过渡版或html5文档，则<br>会有效。

1. 和3.;语义正确性并没有真正进入它。该部分的语义含义是“这是一个顶级标题”;在空白甚至回车方面都是如此微不足道。忽略任何大于单个空格的空格，元素标记内的空格通常是不可取的。解析器总是会尽力而为（保佑他们......好吧，除了IE），但如果你把标签内的空间带到展会上，仍然会完全感到困惑。 < p >将被解释为左括号，字母'p'和右括号，而不是段落标记，例如

还要考虑使用<wbr>，它为较长的单词提供可选的wordbreak。