logo标签列表

如何仅对文本应用CSS样式

htmlcssinnertext
6
我正试图给一个HTML文本行应用样式。我想要的基本上是这样的：What I want to get。
而我实际得到的是这个：What I actually get。
正如你所看到的，只有第一行缩进，其他行没有。到目前为止，我已经将文本放在中，并将其嵌套在
中。 

.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>

只要标题或内容不超过一行，它们就很好用。但一旦它们超过两行及以上，span就会失去内部填充。将内部span更改为display: inline-block; 使其在超过两行时具有块显示。是否有办法实现我要的效果？
3
始终查看 CSS-Tricks :) https://css-tricks.com/multi-line-padded-text/（意思是建议读者经常查看CSS-Tricks网站上的内容，接着提供了一个链接，该链接指向一篇关于如何创建多行填充文本效果的文章。） - Josef Engelfrost
1
你能把那个发帖再发一遍吗？这样我就可以把解决方案归功于你了。我从来没有想过在搜索中加入“多个”这个词，否则我可能会自己找到它。这些示例在我的手机上运行良好，所以我充满了希望。谢谢！ - Nate
3个回答
5
CSS大师Chris Coyier在CSS-Tricks上有一篇关于解决此问题的文章列出了几种方法。其中一种方法是使用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>

谢谢。那个完美地运作了，甚至考虑到了我半透明背景颜色的任何行间距。谢谢。 - Nate
3

尝试按照最佳答案中的示例来解决类似问题。该答案建议使用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拯救了这一天。可惜我不能给出两个正确的答案... - Nate
0
你可以提供更多细节来说明如何使用它。 - Gellio Gao
1
我会添加一个链接到Mozilla开发者网站，以便更好地理解。 - sadric adigbe
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接