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

Posted 2023-02-21

【中文标题】如何仅将 CSS 样式应用于文本

【英文标题】：How to apply CSS styles to text only

【发布时间】：2016-02-11 17:39:33

【问题描述】：

我正在尝试将样式应用于 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; 会在它进入两行后立即显示块。有没有办法达到我想要的效果？

【问题讨论】：

总是检查 CSS-Tricks :) css-tricks.com/multi-line-padded-text

您能否将其重新发布为实际答案？只是这样我就可以将解决方案归功于您。我从来没有想过在搜索中添加“多个”这个词，否则我可能会自己找到它。这些示例在我的手机上运行，​​所以我充满希望。谢谢！

【参考方案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>

【讨论】：

谢谢。这完美地工作，甚至用我的半透明背景颜色来解释任何行距。谢谢。

【参考方案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 颜色值）。但是，您将不得不重新格式化现有代码，因为它会比阴影更缩进。

【讨论】：

谢谢。它工作得非常好，虽然我将正确答案授予 Josef 只是因为它考虑了行距，但基本上 box-shadow 可以节省一天的时间。可惜我不能给出两个正确的答案...

【参考方案3】：

你可以试试

style='width: fit-content;'

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

【讨论】：

你可以提供更多关于你的答案的细节来告诉你如何使用它。

我添加了一个链接到开发者 Mozilla 网站以便更好地理解。