分割段落 HTML答案

【问题标题】：Dividing the paragraph HTML分割段落 HTML
【发布时间】：2020-05-19 09:52:13
【问题描述】：

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

代码如下：

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

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

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

【问题讨论】：

顺便说一句，代码实际上并没有那么难看，它在所有字符串之前都有一些标签，所以 StackOverFlow 显示它是这样的。
使用 标签表示断线
这能回答你的问题吗？ Line break (like ) using only css

标签： html string paragraph

【解决方案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/>
  Stackoverflow: <strong style="color: purple;">is cool.</strong><br/>
</p>

【讨论】：

【解决方案2】：

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

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

然后，根据我们希望仅在此段落类中将 替换为  的要求，我在该段落类中的强标签上点击 ::after 伪元素。

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>

【讨论】：

大声笑最好的答案！不仅仅是
，还有一些有趣的东西。爱你克里斯·库德莫尔

【解决方案3】：

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

【讨论】：

我很确定这正是我一个小时前已经回答的问题！

【解决方案4】：

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

p {
    white-space: pre-line;
}

对于white-space 属性，另请参见MDN Documentation。

【讨论】：

【解决方案5】：

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

Hello! How are you? 

它的输出：

Hello!
How are you?

【讨论】：