skip to Main Content

I’m trying to add a line break after each sentence

("p", {
   className: "heading-subtitle",
   children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}),

I’ve tried using br in it, that clearly didn’t work. I’m not that familiar with JS.

2

Answers


  1. You can achive this by breaking the paragraph ino sentence

    here is the code

    const paragraph = (
      <div>
        {[
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
          "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
          "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
          "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        ].map((sentence, index) => (
          <p key={index} className="heading-subtitle">
            {sentence}
          </p>
        ))}
      </div>
    );
    ReactDOM.render(paragraph, document.getElementById("root"));
    

    try this code please

    Login or Signup to reply.
  2. If you can, I think you should add a white-space: pre-line; value on CSS for the tag and use n as line breaker.

    The white-space value will let html know that you don’t need white-space (n – line break, and t – tab values) to wrap. This way you don’t need to break the passage into many tags that are redundant.

    Edit: note that white-space: pre-line; will only unwrap n, white-space: prewrap; will unwrap both n and t. In your case, pre-line is enough but pre-wrap would also work.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search