时间戳

首页 > 解决方案 > 分割段落 HTML

html - 分割段落 HTML

问题描述

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

这是代码：

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

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

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

标签： htmlstringparagraph

解决方案

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

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

然后，基于我们只想在这个段落类中进行风格替换的要求，我</strong>在</strong><br/>该段落类中的强标签上找到了 ::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>

推荐阅读