如何仅将 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 样式应用于文本的主要内容,如果未能解决你的问题,请参考以下文章