html - 展示性 html 标签的替代品

Question

我的网站上有一个标题，我必须打破一些单词并将其放在第二行，而有些单词的颜色不同。有没有一种方法可以在不使用换行
和强调之类的演示 html 标签的情况下做到这一点？我对 html 和 css 非常陌生。

<h1 class="header" >I AM A <em>SURFER</em> <br/> WHO LOVES THE BEACH, <br/> SUNSET AND ICE CREAM.</h1>

Answer 1

我建议使用span它，然后您将显示为块。

HTML：

<p><span>hello></span><span>How are you</span></p>

CSS：

p span 
{
    display: block;
}

Answer 2

使用您指定的现有类和标签，您可以使用以下内容：

CSS：

span.header h1 {
    margin: 0px;
    padding: 0px;
}

HTML：

<span class="header"><h1>I AM A <em>SURFER</em></h1><h1>WHO LOVES THE BEACH,</h1><h1>SUNSET AND ICE CREAM.</h1></span>

Answer 3

如果（荒谬地）禁止使用em和br标记，那么您可以使用与span这些元素的默认呈现相对应的元素和 CSS 规则：

<style>
.em { font-style: italic }
.br:after { content: '\a'; ; white-space: pre }
</style>
...
<h1 class="header" >I AM A <span class="em">SURFER</span> <span class="br"></span>
WHO LOVES THE BEACH, <span class="br"></span> SUNSET AND ICE CREAM.</h1>

Answer 4

p {
  white-space: pre-line;
 }

HTML：

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

注意：我刚刚按下了新行的回车键。