How can I break the line of a specific word in css?

I have the following string and I need the line to break at We'll.

obs: This string is a i18n.

"Your subscription has ended. We'll have your final invoice available soon."

"We'll" Need to go to the second line.

enter image description here

CodePudding user response：

With css only it won't be easy, if even possible.

Can you also edit the html?

If so you can add a <br> tag before the "We'll" to insert a line break at that point. Something like:

<p>Your subscription has ended.<br>We'll have your final invoice available soon.<p>

You can read more about the <br> tag here.

CodePudding user response：

EDIT: Just saw that the issue is with an i18n string.

In that case you can use the break-line character \n and a white-space: pre-line on the css.

Example:

<p >{{string}}</p> 

.text { white-space: pre-line; }

{
 text: "Your subscription has ended.\nWe'll have your final invoice available soon."
}

The white-space property helps you handle how the white space will be renderered, just take note that breaklines inside the <p> tag will be rendered too, so will might need to keep everything on one line in the code

You can use a <br> like proposed or an <span> with a class and display: block if the change is only aesthetic and you need something with no semantic value

Example:

HTML

<p>
  Your subscription has ended.
  <span >We'll have your final invoice available soon.</span>
</p>

CSS

.br {
  display: block;
}