html - Flexible line break with css only (at fixed point) -

html - Flexible line break with css only (at fixed point) -

i want fluidly break or bring together text @ linebreak (using responsive media queries) breaking point must pre-set (not white-space: xxx)

i have html:

<h1>this <br />very long text menu</h1> <h1>this short one</h1>

i'm thinking, best surround lastly line (in first h1) in span, , style span

like so:

<h1>this <span>very long text menu</span></h1> <h1>this short one</h1>

but write in css create span break sec line? display: block?

@media screen , (max-width: 500px) { h1 span { // show @ it's own line underneath } }

yes, should utilize display block.

@media screen , (max-width: 500px) { h1 span { display: block; } }

html css responsive-design