使用CSS使用填充为文本创建高亮效果

Question

我正在尝试使用换行符创建突出显示的文本效果.

例:

我无法弄清楚如何在文本中添加填充.这是包含文本的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;

有没有人知道如何实现这一目标？

Answer 1

我有同样的问题,我做了一些狩猎,发现了一个纯CSS解决方案,只需要一点CSS:CSS在换行前创建填充

基本解决方案是在顶部和底部使用填充,并使用实心框阴影填充文本的左侧和右侧,如下所示:

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

Answer 2

这是一种使用CSS实现文本的多行,填充,突出显示行为的方法.

这是基于其他地方发现的盒子阴影方法,但是从Firefox 32开始,传统的盒子阴影解决方案不再正确呈现.

查看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>

Answer 3

基于Brandon的解决方案,我发现你实际上可以完全避免填充并纯粹使用box-shadow的扩展选项,并且包装内联元素上的填充符合您的预期.

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

Answer 4

你可以使用box-decoration-break

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

工作示例代码笔