CSS在换行之前创建填充答案

【问题标题】：CSS create padding before line-breakCSS在换行之前创建填充
【发布时间】：2011-08-31 06:54:39
【问题描述】：

是否可以在换行之前添加填充？如，从这个到这个。

当前 CSS 代码：

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

【问题讨论】：

如果不使用一些 JavaScript，我认为这是不可能的......不过，这是个好问题。
好吧，我也没有想出一个 javascript 解决方案。欢迎您提出建议。
您自己是否已经制定了解决方案？如果是这样，您愿意与我们分享吗？
@NGLN：不，我没有。这个问题仍然没有答案。

标签： html css

【解决方案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;
}

【讨论】：

太棒了，我自己想不出来。

【解决方案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 中测试。

查看之前不太成功的尝试的编辑历史记录。

【讨论】：

当您在提供的 jsfiddle 演示中缩小视口时，这会变得有点奇怪，但乍一看似乎还可以。
嗯，确实很奇怪，但这正是提问者所要求的。但我怀疑短文的问题，那就没那么疯狂了。
如果你动态加载了内容呢？
@Owen 动态内容：为什么会有问题？当然，您必须添加一些额外的元素，但是还有更好的解决方案吗？
这就是我的想法，如果客户通过 cms 添加新闻将如何应用，诚然这是一个稍微不同的情况，但我已经构建了这个插件供我们的客户使用需要这种效果的，似乎工作得相当愉快。 jsfiddle.net/OwenMelbz/rd8Qc

【解决方案3】：

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

诀窍是使用 box-shadow 的 spread option，并且包裹的内联元素上的填充效果与您预期的一样。

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

【讨论】：

【解决方案4】：

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

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

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

jQuery first word selector

【讨论】：

【解决方案5】：

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

【讨论】：

欢迎来到 Stack Overflow！虽然这在理论上可以回答这个问题，it would be preferable 在这里包括答案的基本部分，并提供参考链接。

【解决方案6】：

最接近的事情，如果真的那么重要，我想说的是添加display: inline-block;

【讨论】：

这怎么比block好？两者都会产生相同的结果。
不，它没有。看看这个关于内联块的解释：quirksmode.org/css/display.html#inlineblock
但是根据周围元素的宽度，当然有可能看起来完全一样。