如何仅将CSS样式应用于文本

Question

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

我得到的基本上是：

如您所见，第一行是缩进的，但不是任何其他行。到目前为止，我在<span>内部有一个文本，它嵌套在<div>内。

.slide-text .text {
  background-color: rgba(0, 0, 0, .6);
  color: #FFF;
  padding: 8px 17px;
}
.slide-text .slide-title {
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-weight: 700;
}
.slide-text .slide-content {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 500;
}

My HTML code is:
<div class="slide-text">
  <div class="slide-title"><span class="text">[TITLE]</span>
  </div>
  <div class="slide-content"><span class="text">[TEXT]</span>
  </div>
</div>

只要标题或内容都不超过一行，它们就能很好地工作。一旦它们越过两条或更多条线，跨度就会失去其内部衬垫。将内跨度更改为display: inline-block;会在进入两行时立即显示块。有没有办法获得我想要的效果？

Answer 1

CSS大师Chris Coyier有一篇关于CSS-Tricks的文章listing several methods to solve this。一种方法是具有box-shadow的方法。它已经被提到作为答案，但它需要更多的爱在现代Firefox :)工作。

.multi-line-padded {
  background: black;
  color: white;
  
  /* For the top and bottom padding */
  padding: 0.5em 0; 
  
  /* Text height (1.0) + compensate for padding (0.5 * 2) */
  line-height: 2;
  
  /* For the left and right padding */
  /* Vendor prefixes FIRST */
  -webkit-box-shadow: 1em 0 0 black, -1em 0 0 black;
  -moz-box-shadow: 1em 0 0 black, -1em 0 0 black;
  box-shadow: 1em 0 0 black, -1em 0 0 black;
  
  /* Firefox defaults to `box-decoration-break: split`, we need `clone` */
  box-decoration-break: clone; 
}

<p><span class="multi-line-padded">You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder.</span></p>

<p style="text-align: right;"><span class="multi-line-padded"><a href="http://slipsum.com/" style="color: white;">Samuel L. Ipsum</a></span></p>

Answer 2

请在this similar question的最佳答案中按照示例进行操作。它基本上建议使用box-shadow来创建填充。

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颜色值）。但是，您必须重新格式化现有代码，因为它将比阴影进一步缩进。

Answer 3

你可以尝试使用

style='width: fit-content;'

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content