使用CSS在带有填充的文本上创建高亮效果

Question

使用CSS在带有填充的文本上创建高亮效果

css

16

我正在尝试创建带有换行的高亮文本效果。

例如：

highlighted text effect

我无法弄清如何为文本添加填充。这里是包含文本的 span 元素的 CSS：

background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 24px;
padding-left: 5px;

当添加填充时，它只会在文本的开头和结尾添加填充，如下图所示：

已添加填充

CSS：

background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 3em;
padding: 10px;

有谁知道如何实现这个功能吗？

- Andy

7个回答

10

这里有一种使用CSS实现多行、填充和高亮的文字方法。此方法基于在其他地方找到的box-shadow方法，但是在Firefox 32中，传统的box-shadow解决方案不再正确呈现。查看FF32的更新日志后，我发现有一个新属性：box-decoration-break会导致破损。该属性默认为“split”，但需要指定为“clone”才能实现所需的多行填充效果。更多信息请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break。

.box {
  width: 50rem;
  margin: 1rem auto;
  font-family: arial, verdana, sans-serif;
}

h1 {
  color: white;
  font-size: 2.5rem;
  line-height: 4rem; /* reduce size to remove gap between text */
  margin: 0px;
}

h1 span {
  background-color: #A8332E;
  padding: 0.5rem 0;
  -webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
  box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
  -webkit-box-decoration-break:clone;
  -moz-box-decoration-break:clone; 
  box-decoration-break: clone;
}

<div class="box">
  <h1>
    <span>Multi-line, padded, highlighted text that display properly in Firefox using box-decoration-break: clone</span>
  </h1>
</div>

- Bit32

5

在Brandon的方案基础上，我发现您实际上可以完全避免使用填充，而是仅使用盒阴影的扩展选项，并且包裹的内联元素的填充表现得像您期望的那样。

.highlight {
    background: black;
    color: white;
    box-shadow: 0 0 0 5px black;
}

- Adrian Macneil

4

你可以使用 box-decoration-break。

-moz-box-decoration-break:clone; 
-webkit-box-decoration-break:clone;
box-decoration-break:clone;

工作示例 codepen

- Wolfgang Criollo

2

只需添加：

&nbsp;

如果你只是需要文本区域中的空间。

- Cameron

如果文本任意换行，例如在流体容器中，这种方法就不起作用了。我想如果您的换行是固定的，比如 <p> This is the first line. <br/> This is the second line. </p>，那么它可能会起作用。 - Bungle

0

如果这是一个“标题”或类似的东西，并且它会因为容器是流动的而换行，为什么不在容器上设置背景颜色，然后当您的文本/标题换行时，所有文本行之间的空间以及文本行长度都将看起来相同。

<html>
<head><title>...blah...blah</title>
<style type="text/css" title="text/css">
#masthead{
    background-color:black;
    color: white;
}
#masthead h1{
    text-transform:uppercase;
}
#container{
    background-color:red;
}
</style>
</head>
<body>
<div id="container">
  <div id="masthead">
    <h1>some sort of title goes here</h1>
  </div>
</div>
</body>
</html>

此外，您可能只需使用margin/padding样式来增强h1标签中的文本，以获得您想要的外观。

- Obewan

-2

为周围的块级元素（例如 div 或 td）添加填充，并从您的 span 中删除填充。

- Dmitry Negoda

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brandon Webster · Accepted Answer

我有同样的问题，我进行了一些搜索，发现了一个纯CSS解决方案，只需要少量的CSS即可：CSS create padding before line-break

基本解决方案是在文本的顶部和底部使用内边距，并使用实线阴影填充文本的左右两侧，如下所示：

.highlight {
    color:#fff;
    background:#000;
    box-shadow:5px 0 0 #000, -5px 0 0 #000;
    padding: 5px 0;
}