Html 如何仅对文本应用CSS样式

我正在尝试将一种样式应用于类似HTML的文本。我想要的基本上是：

我得到的基本上是：

正如您所看到的，第一行是缩进的，但没有任何其他行。到目前为止，我在

中有文本，它嵌套在

中

。幻灯片文本。文本{
背景色：rgba（0,0,0,6）；
颜色：#FFF；
填充：8px 17px；
}
.幻灯片文本.幻灯片标题{
字体系列：“Titillium Web”，Arial，Helvetica，无衬线；
字号：700；
}
.幻灯片文本.幻灯片内容{
字体系列：“开放式Sans”、Arial、Helvetica、Sans serif；
字号：500；
}

我的HTML代码是：
[标题]
[正文]

试着按照下面的例子来回答这个问题。它本质上建议使用框阴影来创建填充

span {
  background:#ff0;color:#000;
  box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
  -moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
  -webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
}

---

将平均缩进所有文本并添加黄色填充（将

#ff0

更改为所需的任何HTML颜色值）。但是，您必须重新格式化现有代码，因为它将比阴影缩进得更远。

CSS专家Chris Coyier有一篇关于CSS技巧的文章。一种方法是带有

框阴影的方法。它已经被提到作为一个答案，但它需要更多的爱才能在现代Firefox中工作：）


。多行填充{
背景：黑色；
颜色：白色；
/*用于顶部和底部填充*/
填充：0.5em0；
/*文本高度（1.0）+填充补偿（0.5*2）*/
线高：2；
/*用于左侧和右侧填充*/
/*供应商前缀优先*/
-webkit盒阴影：1em 0 0黑色，-1em 0 0黑色；
-莫兹盒阴影：1米0黑色，-1米0黑色；
长方体阴影：1em 0黑色，-1em 0黑色；
/*Firefox默认为'box decoration break:split'，我们需要'clone'*/
盒子装饰破裂：克隆；
}
你认为水动得快吗？你应该看看冰。它像有头脑一样移动。就像它知道它曾经杀掉了世界，还尝到了谋杀的滋味

您可以尝试使用

style='width: fit-content;'

有关更多信息：
始终检查CSS技巧：）您可以将其作为实际答案重新发布吗？只是为了让我相信你的解决方案。我从来没有想过要在搜索中添加“多个”这个词，否则我自己可能会找到它。这些例子在我的手机上很有用，所以我充满了希望。非常感谢。谢谢这非常好用，甚至可以用我的半透明背景色来解释任何行距。谢谢，谢谢。它工作得非常好，虽然我给Josef的答案是正确的，因为它考虑了行间距，但基本上盒子阴影节省了时间。遗憾的是，我不能给出两个正确的答案……你可以提供更多关于你的答案的细节，告诉我如何使用它。为了更好地理解，我添加了一个到开发者Mozilla网站的链接。