Displaying the empty lines from loaded data in a P element

August 11, 2023

I’m pushing some text with blank lines (from a Database) inside a p element:

<p className={styles.biography}>{loaderData.cast.biography} </p>

.biography {
    font-size: 1.4rem;
    color: #333333;
    text-align: justify;
  }

However the blank lines aren’t being displayed. E.g., this is the start of the text retrieved from the Database:

to stay new and fresh even after over four decades in the business.

Downey was born April 4, 1965 in Manhattan, New York....

Which is displayed as:

I tried changing the P to DIV but same problem. Any advice on how to display the empty lines from the data in the output P with css?

>Solution :

You can use the white-space CSS property and set it to a value of pre or pre-line or pre-break etc. depending on how exactly you want the text to behave, to preserve the whitespace.

Here an excerpt of the MDN docs on white-space from 2023-08-11.

Values

white-space property values can be specified as a single keyword chosen from the list of values below, or two values representing shorthand for the white-space-collapse and text-wrap properties.

normal

: Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.

nowrap

: Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.

pre

: Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br/> elements.

pre-wrap

: Sequences of white space are preserved. Lines are broken at newline characters, at <br/>, and as necessary to fill line boxes.

pre-line

: Sequences of white space are collapsed. Lines are broken at newline characters, at <br/>, and as necessary to fill line boxes.

break-spaces

: The behavior is identical to that of pre-wrap, except that:

Any sequence of preserved white space always takes up space, including at the end of the line.

A line-breaking opportunity exists after every preserved white space character, including between white space characters.

Such preserved spaces take up space and do not hang, thus affecting the box’s intrinsic sizes (min-content size and max-content size).

New lines Spaces and tabs Text wrapping End-of-line spaces End-of-line other space separators

normal Collapse Collapse Wrap Remove Hang

nowrap Collapse Collapse No wrap Remove Hang

pre Preserve Preserve No wrap Preserve No wrap

pre-wrap Preserve Preserve Wrap Hang Hang

pre-line Preserve Collapse Wrap Remove Hang

break-spaces Preserve Preserve Wrap Wrap Wrap

	New lines	Spaces and tabs	Text wrapping	End-of-line spaces	End-of-line other space separators
`normal`	Collapse	Collapse	Wrap	Remove	Hang
`nowrap`	Collapse	Collapse	No wrap	Remove	Hang
`pre`	Preserve	Preserve	No wrap	Preserve	No wrap
`pre-wrap`	Preserve	Preserve	Wrap	Hang	Hang
`pre-line`	Preserve	Collapse	Wrap	Remove	Hang
`break-spaces`	Preserve	Preserve	Wrap	Wrap	Wrap

For more details on HTML and whitespace have a look at MDN – How whitespace is handled by HTML, CSS, and in the DOM.

// copied from the question
const textWithWhiteSpace = `to stay new and fresh even after over four decades in the business.

Downey was born April 4, 1965 in Manhattan, New York....`;

function App({ text }) {
  return <p className="biography">{text}</p>;
}

ReactDOM.render(<App text={textWithWhiteSpace} />, document.getElementById("root"));

.biography {
    font-size: 1.4rem;
    color: #333333;
    text-align: justify;
    /* preserve whitespace */
    white-space: pre;
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>