Dividing the paragraph HTML

Question

I am currently creating a site. I have one  that i have to divide for different strings.

Here is the code:

<p>
  Lorem ipsum - <strong style="color: red;">something.</strong> 
  Lorem ipsum - <strong style="color:blue">something.</strong>\n
  Lorem ipsum - <strong style="color: black;">something.</strong> 
  More lorem ipsum: <strong style="color: indigo;">pls help.</strong>
  Stackoverflow: <strong style="color: purple;">is cool.</strong>
</p>

I want it to make a new line after every  tag, but it outputs a single line. I tried \n, but it doesn't work.

Also please don't ask me to divide it to 3 or 4 paragraphs, I shouldn't do it for this code.

By the way, the code actually doesn't look that ugly, it has some tabs before all the strings so StackOverFlow shows it like this. — , Feb 03 '20 at 15:50
Does this answer your question? [Line break (like
) using only css](https://stackoverflow.com/questions/10933837/line-break-like-br-using-only-css) — Stephen M Irving, Feb 03 '20 at 16:55

score 1 · Answer 1 · answered Feb 03 '20 at 16:20

Use   as demkovych suggests.

<p>
  Lorem ipsum - <strong style="color: red;">something.</strong><br/>
  Lorem ipsum - <strong style="color:blue">something.</strong><br/>
  Lorem ipsum - <strong style="color: black;">something.</strong><br/>
  More lorem ipsum: <strong style="color: indigo;">pls help.</strong><br/>
  Stackoverflow: <strong style="color: purple;">is cool.</strong><br/>
</p>

score 1 · Answer 2 · edited Feb 03 '20 at 19:20

1

The easiest thing to do would be to have a   tag after every strong tag. However, a better practice is to add this styling in CSS. The p tag could be styled like this:

p {
    white-space: pre-line;
}

See also the MDN Documentation for the white-space property.

edited Feb 03 '20 at 19:20

B--rian

5,578
10
38
89

answered Feb 03 '20 at 16:21

Marc Frame

923
1
13
26

score 1 · Answer 3 · answered Feb 03 '20 at 17:43

I found this to be an interesting problem and I've expanded upon it a little.

The first step was to add a class to the P tag, so we could differentiate and reuse the styling for other similar paragraphs.

Then, based on the requirement that we want to stylistically replace  with   in this paragraph class only, I hit up the ::after pseudo element on strong tags within that paragraph class.

p.multicolor strong::after { 
 content: "\A";
 white-space: pre; 
}

Then, Just for the heck of it, I added the colors.

<html>
<head>
<style> 

p.multicolor strong::after { 
 content: "\A";
 white-space: pre; 
}
p.multicolor strong:nth-of-type(5n+1) {
  color: red;
}
p.multicolor strong:nth-of-type(5n+2) {
  color: blue;
}
p.multicolor strong:nth-of-type(5n+3) {
  color: black;
}
p.multicolor strong:nth-of-type(5n+4) {
  color: indigo;
}
p.multicolor strong:nth-of-type(5n) {
  color: purple;
}
</style>
</head>
<body>

<p class="multicolor">
 Lorem ipsum - 
<strong> something</strong>
 Lorem ipsum - 
<strong> something</strong>
Lorem ipsum - 
<strong> something</strong>
More lorem ipsum: 
<strong> pls help.</strong>
Lorem ipsum - 
<strong> is cool.</strong>
Out of colors :
<strong> start over from red </strong>
Continuing : 
<strong> should be blue </strong>
</p> 

</body>
</html>

LOL the best answer! Not just
but something interesting. Love you Chris Cudmore — , Feb 08 '20 at 14:58

score 1 · Answer 4 · answered Feb 03 '20 at 17:53

1

Instead of \n, use  , it will solve your problem. People use \n on programming languages such as C and Python, for example.

answered Feb 03 '20 at 17:53

Gabrielpdsilva

21
3

I'm pretty sure this is exactly what I already answered an hour ago! – DreamTeK Feb 04 '20 at 08:12

score 0 · Accepted Answer · edited May 14 '20 at 14:45

0

\n isn't for HTML. Try using  . How to use:

Hello! How are you? 

What it outputs:

Hello!
How are you?

edited May 14 '20 at 14:45

answered Feb 08 '20 at 16:16

LeopardL GD

139
13

score 0 · Answer 6 · answered Aug 23 '22 at 05:56

0

consider multi-column layout,

this is documentation

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout

answered Aug 23 '22 at 05:56

user16092386

1
1
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 26 '22 at 14:01

Dividing the paragraph HTML

6 Answers6