CSS在换行前创建填充

是否可以在换行前添加填充？如从，从这 enter image description here 到这。CSS在换行前创建填充

当前的CSS代码：

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

来源

2011-05-23 Gajus

我不认为这是可能的，没有使用一些JavaScript ......虽然很好的问题。 – Midas 2011-05-23 16:41:52

好吧，我也没有想出一个JavaScript解决方案。欢迎您提出建议。 – Gajus 2011-05-23 19:00:25

您是否已经自己制定了解决方案？如果是这样，你想与我们分享吗？ – NGLN 2011-06-07 21:14:34

-1

最接近的事，如果真的事项多，我会说是增加display: inline-block;

来源

2011-05-23 16:48:05 Fredrik

这比“block”更好吗？两者都会产生相同的结果。 – Gajus 2011-05-23 19:04:33

不，它不。请查看以下内嵌块的解释：http://www.quirksmode.org/css/display.html#inlineblock – Fredrik 2011-05-23 19:13:40

但是，根据周围元素的宽度，当然可能看起来完全相同。 – Fredrik 2011-05-23 19:16:08

display: block将实现你想要的部分，但当然将会使span成为一个块元素，所以你不会在你的例子中看到包装行为。

您的屏幕截图包含了您需要尝试做的事情：您需要在“正常”段落文本的左右边缘添加边距，然后让span忽略此操作（并且包含其填充），与您的其他文字相比，实现蓝色突出显示的“突出”。你不能在你的跨度上使用直接的CSS，因为它覆盖了两行，显然“左”和“右”只是指跨度，而不是其中包含的单个文本片段。

直CSS不是这里的答案。你可能想看看这个问题，它使用一个jQuery filter抢到一个实体的第一个字，等：

jQuery first word selector

来源

2011-05-23 16:51:05 Ben

它采取了一些试训，但在这里它是：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; 
}

诀窍是风格的蓝色背景全段，只有放白色背景上最重要的是在开始和结束。这样做保证了蓝色背景别处...;）

两个主要的缺点：

突出显示的文本具有在第一行开始（但不一定有流入第二），
该段落必须与理由相符。

在Opera 11，Chrome 11，IE7，IE8，IE9，FF4和Safari 5中通过了所有DTD的测试。

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

来源

2011-05-23 20:14:48 NGLN

当您在您提供的jsfiddle演示中使视口更小时，这会变得有点奇怪，但第一眼看起来似乎没问题。 – 2011-05-24 23:34:54

确实很奇怪，但这是询问者的要求。但我怀疑短文是关注的，那么它并不是那么疯狂。 – NGLN 2011-05-25 16:13:24

如果您在内容中动态加载，那么该怎么办？ – Owen 2012-07-06 15:18:19

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

来源

2011-08-08 22:09:37 Esben

欢迎来到堆栈溢出！虽然这可能在理论上回答这个问题，[这将是更可取的]（http://meta.stackexchange.com/q/8259）在这里包括答案的重要部分，并提供供参考的链接。 – Kev 2011-08-09 11:42:32

我不得不增加一个额外的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; 
}

来源

2012-08-16 12:28:53 Tonez

真棒，不会想到我自己的。 – 2013-12-18 06:03:33

任何工作jsfiddle？因为我失败了。 – 2013-12-20 22:36:47

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

诀窍是使用箱形阴影的spread option，并且包装的内联元素上的填充行为与您的期望相同。

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

来源

2013-08-17 17:49:15

CSS在换行前创建填充

回答

相关问题