html - 为带有背景的文本元素设置样式

Question

我想知道，是否可以设置一些文本的样式，如下所示:

首先，您看到文本使用的是 <h1>标签。它有背景色设置，还有max-width属性将其分成两行。

在下方您会看到相同的文本，但背景看起来更好并且符合我的要求。

我的问题是:这可能吗？我们看到单词之间有一些空白，我不确定是否可以做到这一点，而不会将文本分成 2 <h1>标签，例如:

<h1>HEADING</h1>
<h1>WITH GRADIENT</h1>

感谢您的建议。

这就是我的尝试:

 h1 {
    font-weight: 300;
    text-transform: uppercase;
    background: linear-gradient(to right, rgba(40,138,187,0.8) 0, rgba(128,28,75,0.8) 100%);
    padding: 10px 18px;
    display: inline-block;
    margin-bottom: 55px;
    font-size: 60px;
    letter-spacing: 5px;
    max-width: 300px
}

Answer 1

添加此属性 box-decoration-break: clone;

h1 {
  background-color: #9d7f71;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
  font-size: 60px;
  letter-spacing: 5px;
  width: auto;
line-height: 1.4;
display: inline;
}

<h1>HEADING WITH GRADIENT</h1>