如何仅将 CSS 样式应用于文本
How to apply CSS styles to text only
我正在尝试将样式应用到类似 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;
使其在进入两行后立即显示为块。有什么办法可以达到我想要的效果吗?
尝试按照 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 颜色值)。但是,您将不得不重新格式化现有代码,因为它会比阴影缩进更多。
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>
您可以尝试使用
style='width: fit-content;'
更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content
我正在尝试将样式应用到类似 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;
使其在进入两行后立即显示为块。有什么办法可以达到我想要的效果吗?
尝试按照 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 颜色值)。但是,您将不得不重新格式化现有代码,因为它会比阴影缩进更多。
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>
您可以尝试使用
style='width: fit-content;'
更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content