How do you tell the browser, "if you need to wrap first, move it here"?

Question

I am creating a web page where the header has a main object and a descriptor, each of which is wrapped in tags.

I looked at the <wbr> tag and it only works if you have long lines without spaces. But I have spaces with interruptions in the text.

I need a piece that I can insert between two elements or characters that tell the browser that if it is provided with the following code:

 <span>How do you tell a browser,</span><span>"if you need to wrap, wrap here first"<span> 

Extract this:

How do you tell the browser, "if you wrap first, wrap here"?

But if there is not enough space, first split it by specifying this:

As you indicate the browser,

"if you need to wrap, wrap first"

Then, if it contracts, further tearing the line where ever needed.

Is there a character, tag, or CSS rule that says, "Insert a line break right here before you even think about putting a line break somewhere else?

Answer 1

I can’t believe that I messed it up, but yes, of course, there is a way

With this code:

 <span>How do you tell a browser,</span><span>"if you need to wrap, wrap here first"<span> 

Using span {display:inline-block} in CSS will lead to their sharing.

Answer 2

How about replacing spaces you don't want to use with   ? I do not think that what you want exists out of the box.