Question 228059 in CSS Question posted in
Some basic documentation can be found here.

Css – Displaying the empty lines from loaded data in a P element

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:

enter image description here

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?

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search