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

Posted

技术标签:

【中文标题】如何仅将 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 网站以便更好地理解。

以上是关于如何仅将 CSS 样式应用于文本的主要内容,如果未能解决你的问题,请参考以下文章

仅将 CSS 样式表应用于单个 UserControl

仅将样式应用于可编辑内容中的选定文本 <p>

CSS:仅将指针事件应用于文本

如何仅将样式应用于父元素?

如何通过样式/主题仅将颜色控制*属性应用于工具栏而不影响其余项目样式

如何仅将 CSS 过渡应用于 transform 属性