I have seen the solutions using white-space, display, overflow properties to stop elements automatically creating new lines.

The problem I have is that I have a lengthy string of text where I have intentionally created carriage returns and new lines at specific points within. I am struggling keeping my required formatting, but removing the automatic new lines that are added in the render of the page.

Example String in the controller with \r\n:

<span>1) this is just a random sentence and will start a new line at 2) but if there is a lengthy string that needs a scrollable element it creates a new line - I can add an overflow-x but still doesn't work. 3)Looking for any help or guidance please.</span>

Example render:

1. this is just a random sentence and will start a new line at
2. but if there is a lengthy string that needs a scrollable element it creates a new line - I can add an overflow-x but still doesn't work.
3. Looking for any help or guidance please.

Where I need all of #2 on the same line, but still the new line separation between each number.

Apologies if this has been answered but I can't find a solution that deals with the above.

CodePudding user response：

You should use white-space:no-wrap and a br where you want a new line

span {
  white-space: nowrap;
}

<span>
1) this is just a random sentence and will start a new line at 2) but if there is a lengthy string that needs a scrollable element it creates a new line - I can add an overflow-x but still doesn't work. 3)Looking for any help or guidance please.<br>

this is on a new line
</span>