Page 1 of 1

Rendering New Lines in HTML

Posted: October 13th, 2022, 5:11 pm
by JefferyD
New line characters do not display when rendering HTML by default. If that is not desired, then some ways to include new lines are:
  1. Use a text area in read only mode. Text areas honor new line characters, and setting them to be read only can be an option if it should not accept any user input.
  2. Adjust the white-space style of an element to change the default behavior of ignoring new lines.
In this example, the text entered into the "Input" text area is copied directly into the other elements:
image.png
  • Read Only Text Area - This looks identical to the "Input" text, but cannot be edited by the user. CSS styling can also be applied to remove the border, change the coloring, or alter it in any other to distinguish it from editable text areas.
  • Default Label - This shows what the text would look like by default.
  • Label With Wrapping - This shows what the text would look like with "white-space" styling set to "break-spaces" (as shown in the green box). Some other values like "pre", "pre-wrap", and "pre-line" would also preserve the new line characters but while handling other kinds of text wrapping differently. More information can be found here.