如何在一个多行包装句中的每一行添加水平填充？ [英] How to add horizontal padding to every line in one multi-line wrapped sentence?

问题描述

这是我的代码：

<div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div>

这是目前的样子：

http://i48.tinypic.com/2dqvo1i.png

有没有办法在突出显示的文本的两边添加填充？ SPAN上的常规填充不起作用，因为它只考虑句子的开头和结尾，而不是单独的每一行。

Is there a way to add padding to the sides of the highlighted text? Regular padding on the SPAN doesn't work, because it only takes into account the the beginning and end of the sentence, not every line separately.

任何想法？ CSS3代码很好。

Any ideas? CSS3 code is fine.

推荐答案

在努力了一段时间后，我发现一个非古怪的解决方案，在文本行中添加两个CSS3阴影：

After struggling for some time I found a non-quirky solution with a decent fallback for older browsers – adding two CSS3-shadows to the lines of text:

span {
background:#ff0;color:#000;
box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
}

这篇关于如何在一个多行包装句中的每一行添加水平填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！