仅使用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写什么才能让这个跨度突破到第二行呢？显示：阻止？

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

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

}

Answer 1

是的，你应该使用display block。

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

    h1 span {
        display: block;
    }

}