使用CSS使用填充在文本上创建突出显示效果

问题描述

|| 我正在尝试使用换行符创建突出显示的文本效果。例：我不知道如何在文本中添加填充。这是包含文本的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;

是否有人对如何实现这一目标有任何想法？

解决方法

我有同样的问题，做了一些狩猎，发现了一个纯CSS解决方案，它只需要一点CSS：CSS在换行之前创建填充基本解决方案是在顶部和底部使用填充，并使用实心框阴影填充文本的左侧和右侧，如下所示：

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

,这是一种仅使用CSS即可实现文本的多行填充，突出显示行为的方法。这基于在其他地方找到的box-shadow方法，但是从Firefox 32开始，传统的box-shadow解决方案不再能够正确呈现。查看FF32的变更日志，我发现有一个新属性：box-decoration-break导致损坏。此属性默认为\'split \'，但需要指定为\'clone \'以实现所需的多行填充效果。有关更多信息，请参见： https://developer.mozilla.org/zh-CN/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>

,基于Brandon的解决方案，我发现您实际上可以完全避免填充，而仅使用box-shadow的传播选项就可以做到这一点，而包裹的内联元素上的填充可以像您期望的那样运行。

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

,只需添加：

&nbsp;

如果您正在寻找文本区域中的空格。 ,您可以使用box-decoration-break

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

工作样本codepen ,如果这是一个\“ title \”或类似的东西，并且由于容器是可变的而自动换行，那么为什么不在容器上设置背景色呢？如果/如果您的文本/标题换行了，则文本行之间的所有空格，以及文本行的长度将看起来相同。

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

另外，您可能只需要用边距/填充样式增强h1标签中的文本即可获得所要的外观。 ,为周围的块级元素（例如div或td）添加填充，并从跨度中删除填充。

使用使用使用创建填充填充效果效果显示显示本上突出