如何让标题在正确的地方打破

Question

我是css的新手，想学习正确的方法或最佳实践方法，让标题突破新线。我附上了一张图片，以便在计算机网络浏览器中显示我想要的结果。

以下是该页面的html：

<div class="tagline">
            <h1><span>Transform your written</span> work into a <strong>masterpiece<strong></h1>
    </div>

这是css：

h1{
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
}



.tagline {
    background: #abdfe8 url(images/bg-tagline.png) no-repeat;
    height: 450px;
    text-align: center;
}



.tagline h1 {
    padding: 90px 0 60px 0;
    width: 520px;
    margin: 0 auto;
}

.tagline h1 span {
    letter-spacing: 2px;
}    

如图所示，效果很好。但是，作为一名新的css开发人员，我想知道编写此代码的最佳实践，或者我是否在正确的轨道上。

Answer 1

您可以使用span之类的：

<div class="tagline">
  <h1>
    <span>Transform your written</span> 
    <span>work into a <strong>masterpiece<strong></span>
  </h1>
</div>

CSS：

span{
   display: block;
}

Answer 2

你可以尝试

span.dontwrapthistext{ display:inline-block; }

在此范围内，文本将不会被包装

<span class="dontwrapthistext">Insert text here that you don't want to be wrapped</span>

因此，您的整个文本将首先包装到所需的块中，然后根据需要包含到较小的块中