仅使用 css 的灵活换行符（在固定点）

Question

我想在换行时流畅地中断或加入文本（使用响应式媒体查询） 但断点必须预先设置（不带空格：xxx）

我有这个 html：

<h1>This is a very <br />Very long text menu</h1>
<h1>This is a short one</h1>

我在想，最好将最后一行（在第一个 h1 中）包围在一个跨度中，然后设置该跨度的样式

像这样：

<h1>This is a very <span>very long text menu</span></h1>
<h1>This is a short one</h1>

但是我应该在 css 中写些什么来让 span 变成第二行呢？显示：阻止？

@media screen and (max-width: 500px) {

    h1 span {
        // show it at it's own line underneath
    }

}

Answer 1

是的，你应该使用显示块。

@media screen and (max-width: 500px) {

    h1 span {
        display: block;
    }

}