Html 防止自动将背景大小调整为全行宽度标题文本

我试图在

元素上使用CSS实现以下功能（因为显然这不是默认的浏览器行为）：

但是，我似乎无法阻止浏览器按如下方式呈现它：

有人知道如何正确地实现这一点吗

当前代码：

.title{
宽度：300px；
浮动：左；
线高：68px；
显示：内联块；
}
.标题h1{
字体大小：42px；
线高：58px；
颜色：#FFF；
背景：#000；
空白：正常；
单词包装：打断单词；
显示：内联块；
垂直对齐：底部对齐；
}

这是一个两行的标题

显示：内联

而不是内联块

.title{
宽度：300px；
浮动：左；
线高：68px；
显示：内联块；
}
.标题h1{
字体大小：42px；
线高：58px；
颜色：#FFF；
背景：#000；
空白：正常；
单词包装：打断单词；
显示：内联；
垂直对齐：底部对齐；
}

这是一个两行的标题