什么是将标题分解为行的语义正确方法？

Question

简单的问题！

我认为（不知道为什么）使用<br/>有点不好......

<h1>My<br/>
multiline header - notice only first<br/>
line contains short word</h1>

还有其他建议吗？

更新 案例是其中一行将是额外的短[呃]然后是其他

Answer 1

＆lt; br /＆gt;。

没有任何问题

如果你想在一个不寻常的地方插入换行符，而你实际上是指一个换行符，那么使用换行符。

Answer 2

通常的HTML流程？

普通的HTML流程似乎有什么问题？如果您的线条太长而且想要缩短它们，您可以随时在CSS中定义H1的宽度，这样就不会添加标记以适应您的设计。标记应该是语义的，CSS应该提供必要的视觉外观。因此，您可以为H1元素添加宽度，并使其按照设置宽度打破该行。

h1
{
    width: 40em;
}

另外，请考虑使用与文字大小相关的尺寸，以便在不同页面上使用不同的头部文字尺寸时，您可以获得更好的效果（不会太窄但不会太宽）。

当<br/>没事的时候？

每当你真的需要将标题分成新行时，使用<br/>当然是正确的。如果这是你需要在你的标题上做的事情，不要害怕使用它。但是为了头线溢出的目的，不使用断点。

Answer 3

您不应该在标记中使用<br />，最好的方法是将它包含在将包装H1文本的div中：

<div style="width:50px;">
    <h1>My multiline header wraps now without br tags!</h1>
</div>

请参阅此相关问题：

Can CSS force a line break after each word in an element?

在纯CSS中这是不可能的，但使用JavaScript是可能的。我只是去找包装div。