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

Question

简单的问题!

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

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

还有其他建议吗？

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

Answer 1

<br />没有错.

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

匿名-1,爱他们. (3认同)
通常，我不同意这种做法，因为使用标记来影响设计问题并不理想。但是，根本没有其他方法可以仅使用CSS来获得所需的效果。 (2认同)
我同意@MikeB，但这不是HTML的问题，而是CSS的问题。HTML不必为了满足CSS而牺牲语义。它应该是相反的方式。如果（前端）Web是比萨饼，则HTML将是外壳，而CSS将是浇头，而JS将是蒜末。 (2认同)

Answer 2

正常的HTML流程似乎有什么问题？如果您的行太长并且想要缩短它们，则可以始终H1在CSS中定义您的宽度，因此您无需添加标记即可容纳您的设计。标记应该是语义的，CSS应该提供必要的视觉外观。因此，您可以为H1元素添加宽度，并使其按设置的宽度折断线。

h1
{
    width: 40em;
}

另外，请考虑使用与文字大小相关的尺寸，这样在不同页面上使用不同的标题文字大小时，您将获得更好的结果（不要太窄也不能太宽）。

每当您真正需要将标题换成新的一行时，使用无疑是正确的<br/>。如果您的标题需要这样做，请不要害怕使用它。但是出于标题行溢出的目的，不使用中断。