如何在多行折叠句子中为每一行添加水平间距？

Question

这是我的代码：

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

当前的页面效果如下：

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

有没有一种方法可以在突出显示的文本两侧添加填充？ 对SPAN进行常规填充不起作用，因为它只考虑句子的开头和结尾，而不是每一行。

有任何想法吗？ CSS3代码可以。

- Marc

---

只是为了澄清一下，您是否希望每行包装文本的填充方式不同？如果不是的话，为什么不直接将填充应用于 div 标签呢？ - JohnFx

好的，我差不多晚了一年，但我正在寻找完全相同的东西.. - pasine

请查看此解决方案 - https://dev59.com/xFsW5IYBdhLWcg3wuJKd#34660112 - Stickers

Answer 1

在经历一些困难后，我找到了一种不会出现怪异问题的解决方案，并且对于旧版浏览器有一个不错的回退方案——给文本行添加两个CSS3阴影：

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

- Wolf-Dieter Grabner

---

似乎是唯一的方法。那太完美了。 - Ben

这真的是一个针对常见任务的伟大而简单的解决方案。 - klickreflex

有人有IE8及以下版本的解决方案吗？ - klefevre

Answer 2

white-space: pre-wrap;

虽然不是一个完美的解决方案，但可以在换行符之前添加一些空格。

- Lutsen

---

谢谢。确实没有解决问题，但添加的空格有助于我达到想要的外观。 - Marc

Answer 3

一个简单的方法是将以下内容添加到您的样式部分定义中：

span {
padding-left: 8px;
padding-right: 8px;
}

此外，它也适用于“p”（和其他标签），而不是“span”。

- Pablo Manera

Answer 4

尝试使用inline-block。它在IE8之前的版本中无法正常工作(虽然有一些解决方法)，但其他流行的浏览器都应该可以正常工作：

p span {
    display: inline-block;
    padding: 0 2em;
}

- robertc

---

很不幸，这也不起作用。它只是创建了一个块元素，没有清除其兄弟元素。实际上，这意味着我得到了一个黄色的块，而不是黄色的线。 - Marc

哦，我明白了。那么我认为你想做的是不可能的 - 填充本质上适用于块。一种使用jQuery在适当位置添加不间断空格的解决方案是唯一的方法。 - robertc

太遗憾了。那我就按原样留着它吧。不过还是谢谢你的帮助。 - Marc

@Marc，这对你可能没有太大用处，但我今天发现有一个CSS属性提议可以让你做到这一点，不幸的是它已经被取消了：http://www.w3.org/TR/2008/WD-css3-background-20080910/#the-border-break - robertc

还是挺有趣的！ - Marc

Answer 5

只需填充包围 span 的 "p" 标签即可。"p" 标签（与 span 不同）是块级元素，因此在顶部、底部或侧面填充将按预期工作。

- Peter Anselmo

---

我想填充黄色文本条，这样文本就不会太靠近边缘。示例模拟图：http://i50.tinypic.com/206dlef.png当向P添加填充时，它只会向整个块添加填充。然而，我想要将填充分别添加到每行文本中。我开始觉得这是不可能的，因为文本行已经被解释为一个元素，但是为了使我的想法起作用，需要将每行文本单独解释以使水平填充起作用。 - Marc

不幸的是，我无法为每一行创建单独的元素，因为它们是动态创建的，而且我事先不知道“断点”。理想情况下，会有一个“each-line”伪选择器，我可以用它来分别填充每一行。 - Marc

Answer 6

终于找到了走出困境的方法。对我有用。使用左侧的按钮就像这样。

<p>
<button class="blankspace">
</button>
<span>
</span>
</p>

并将其样式化为CSS

.blankspace {
    background: none;
    opacity: 0.0;
    outline:0;
    text-decoration: none;
    width: 2%;
    height: 80%;
    margin:0 auto;
    float:left;
    text-align:right;
    padding:0%;
    font-size:2px;
}

- Ajay Singh

Answer 7

不要像建议的那样添加两个CSS3阴影，这里有一个更简单的答案：

使用display:block

<span>默认是display:inline，所以你添加的边框和填充实际上并没有影响它的大小。因此只有第一行受到影响。

在上使用display:block，<span>现在就像<p>和<div>一样工作。

这里有一个很好的解释： http://quirksmode.org/css/css2/display.html

- Josh Moore

---

那不是 OP 想要的... 如果你这样做，就没有“高亮”效果，它看起来像一个简单的框。 - Arkana