Displaying the empty lines from loaded data in a P element

Question

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?

+1 on Wing's comment. You can still use your `
` but put a class on it, then use CSS to style that `p.yourclass` to use `pre-wrap` or `pre-line` — Stephen P, Aug 11 '23 at 16:37
@StephenP thanks. I didn't intentionally post a duplicate question, my searching yielded no results on my issue — D. Rattansingh, Aug 11 '23 at 23:17

Mushroomator · Accepted Answer · 2023-08-11T16:51:37.473

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

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>

Hello, I like the answer that you posted then deleted on "Finding the index of the first repeating item". I think you deleted it because it didn't return the first repeating item, but instead the item that repeats first :-p Here is a quick fix: `def solution(seq): d = {} for i, x in enumerate(seq): d.setdefault(x, []).append(i) return min(first_index for first_index, *duplicates in d.values() if duplicates)` — Stef, Aug 12 '23 at 15:18
Thanks, I was updating my answer to address some comments and therefore deleted in to avoid it being downvoted by readers who don't pay attention to detail (since detail is crucial there). I've now updated my answer there to address those problems. The answer should now be back up [there](https://stackoverflow.com/questions/76889323/finding-the-index-of-the-first-repeating-item-in-an-array-in-python/76889422#76889422). So we should delete the commetns here now ;) — Mushroomator, Aug 12 '23 at 16:01

score 1 · Answer 2 · answered Aug 11 '23 at 16:33

1

Using <pre></pre> tag, should do the trick, because with this tag, spaces will be counted and will not be trimmed.

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

answered Aug 11 '23 at 16:33

AMirhesAM

134
1
7

	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

Displaying the empty lines from loaded data in a P element

2 Answers2

Values