Question

是否可以在换行前添加填充？同样，从此 enter image description here 到此。

当前的CSS代码：

span.highlight { background: #0058be; color: #FFF; padding: 2px 5px; }

Answer 1

我必须添加额外的margin-left:0;才能使两条线从同一点开始。

这可以使用纯CSS完成。在突出显示的左侧和右侧以相同颜色创建实体box-shadow（并使用margin更正间距）。对于你的情况：

span.highlight { 
  background: #0058be;
  color: #FFF;
  box-shadow:5px 0 0 #0058be, -5px 0 0 #0058be;
  padding: 2px 0;
  margin:0 5px;
}

Answer 2

需要一些试用，但现在是：the single- and multi-line highlighter with additional padding。

HTML：

<h3>Welcome to guubo.com, Gajus Kuizinas</h3>
<p><span>So far you have joined: </span><em>Networks guubo.com</em><ins></ins></p>

CSS：

h3 {
  padding-left: 5px;
}
p {
    background: #0058be;
    position: relative;
    padding: 0 5px;
    line-height: 23px;
    text-align: justify;
    z-index: 0;
}
p span {
    background: #fff;
    padding: 2px 0 2px 5px;
    position: relative;
    left: -5px;
}
p em {
    background-color: #0058be;
    color: #fff;
    padding: 2px 5px;
}
ins {
    position: absolute;
    width: 100%;
    line-height: 23px;
    height: 23px;
    right: -5px;
    bottom: 0;
    background: #fff;
    z-index: -1;
}

诀窍是用蓝色背景设置整个段落的样式，并且只在开头和结尾处放置白色背景。这样做可以确保其他地方的蓝色背景......;）

两个主要缺点：

突出显示的文字必须从第一行开始（但不一定要流入第二行），
该段落必须与理由保持一致。

使用所有DTD在Opera 11，Chrome 11，IE7，IE8，IE9，FF4和Safari 5中进行测试。

请参阅以前不太成功的尝试的编辑历史记录。

Answer 3

你可以使用盒子阴影来实现这一点，没有杂乱的填充或边距。

诀窍是使用box-shadow的spread option，并且包装内联元素的填充符合您的预期。

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

Answer 4

display: block将实现您想要的部分内容，但当然它会使span成为块元素，因此您不会在示例中看到包装行为。

您的屏幕截图显示您需要尝试和执行的操作的线索：您需要在“正常”段落文本的左侧和右侧施加边距，然后让跨度忽略此（并包括其填充），与其他文本相比，实现蓝色突出显示的“悬垂”。你不能用你的跨度上的直接CSS做到这一点，因为它涵盖两行，显然“左”和“右”仅指代跨度，而不是其中包含的单个文本。

Straight CSS不是这里的答案。您可能想看看这个问题，它使用jQuery filter来获取实体中的第一个单词等：

jQuery first word selector

Answer 5

也许你可以使用这种技术。 http://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/

Answer 6

最接近的是，如果我真的很重要，那就是添加display: inline-block;

CSS在换行前创建填充

6 个答案: