Break in paragraph

Question

So for some reason i'm not able to create a broken line inside the paragraph such that I can get a new line... I'm using tailwind with react.

<p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
Transform the way you interact with your customers. Collect valuable, actionable and credible feedback.</p>

So I've tried all these solutions, but I get errors.

1.

<p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
    Transform the way you interact with your customers. <br> Collect valuable, actionable and credible feedback.</p>

<p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
    Transform the way you interact with your customers. <br> Collect valuable, actionable and credible feedback.</br> </p>

<p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
    Transform the way you interact with your customers. {"\n"} Collect valuable, actionable and credible feedback.</p>

I get this error: https://codepen.io/SermadAlladin/pen/mdpyrZQ And when i close the tag it still messes up. — Sermad NaJar, Mar 14 '22 at 10:13

score 1 · Answer 1 · answered Mar 14 '22 at 10:29

1

Relate to the answer here

Every html tags should be closed, remember this is jsx not html. Every component should be closed.

<br> in jsx ->  <br/>
<input> in jsx -> <input />

You can read about jsx more here

answered Mar 14 '22 at 10:29

Muhamet Smaili

375
2
9

I still get an error when i use the closing tag. – Sermad NaJar Mar 14 '22 at 10:48
```
Transform the way you interact with your customers.
Collect valuable, actionable and credible feedback.

``` – Muhamet Smaili Mar 14 '22 at 11:06
That should be your example. So if you want to write two breaks inside p just write them

, you can write as many as you want but closing should happen at the end
. check If you are doing so, if not please write a sandbox so I can see it, I will kindly help you. – Muhamet Smaili Mar 14 '22 at 11:08

score 0 · Answer 2 · answered Mar 14 '22 at 10:19

0

The first one it's correct, just use a self closing tag so you won't get that error

<p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg 
xl:text-xl">
Transform the way you interact with your customers. <br/> Collect valuable, 
actionable and credible feedback.</p>

answered Mar 14 '22 at 10:19

coglialoro

601
1
4
12

I still get an error when i close the tage like this. – Sermad NaJar Mar 14 '22 at 10:49

score 0 · Answer 3 · answered Mar 17 '22 at 18:35

0

I have same style worked inside div

  <div className="text-lg text-center font-semibold mt-4">
        Breaking after this 
        <br /> new line
      </div>

answered Mar 17 '22 at 18:35

Yilmaz

35,338
10
157
202

Break in paragraph

3 Answers3