分割段落HTML

Question

我目前正在创建网站。我有一个 ，我必须为不同的字符串划分。

代码如下：

<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>
  Whosebug: <strong style="color: purple;">is cool.</strong>
</p>

我希望它在每个  标记后换行，但它只输出一行。我试过 \n，但它不起作用。

另外请不要让我把它分成3或4段，我不应该为这段代码做。

Answer 1

按照 demkovych 的建议使用  。

<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/>
  Whosebug: <strong style="color: purple;">is cool.</strong><br/>
</p>

Answer 2

最简单的做法是在每个强标签后添加一个   标签。但是，更好的做法是在 CSS 中添加此样式。 p 标签的样式可以是这样的：

p {
    white-space: pre-line;
}

另见 MDN Documentation white-space 属性。

Answer 3

我发现这是一个有趣的问题，我对其进行了一些扩展。

第一步是在 P 标签中添加 class，这样我们就可以区分和重复使用其他类似段落的样式。

然后，根据我们希望仅在class段中用 在文体上替换的要求，我在强标签上打了::after伪元素在该段中 class.

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

然后，为了好玩，我添加了颜色。

<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>

Answer 4

代替\n，使用 ，它将解决您的问题。例如，人们在 C 和 Python 等编程语言上使用 \n。

Answer 5

\n 不适用于 HTML。尝试使用  。使用方法：

Hello! How are you? 

它输出的内容：

Hello!
How are you?

分割段落HTML

Dividing the paragraph HTML

html

string

paragraph