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

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>

注意：我只按了输入键换行。

Answer 3

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

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 4

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

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

表示html标签的替代品

4 个答案: