Question

这是我的代码：

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

目前的情况如下：

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

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

有什么想法吗？ CSS3代码很好。

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

Answer 2

white-space: pre-wrap;

不是真正的解决方案，但在休息之前会增加一些空间。

Answer 3

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

Answer 4

一种简单的方法是将其添加到您的样式扇区定义中：

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

它也适用于“p”（和其他人）而不是“span”。

Answer 5

试试inline-block。它不适用于比IE8更早的任何东西（though there are some work arounds），但其他一切流行应该没问题：

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

Answer 6

Finally found a way out this misery. Worked for me. Use a button on the left like this.

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

and css it like

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

Answer 7

不是按照建议添加两个CSS3阴影，而是一个更简单的答案：

使用display:block

默认情况下，

<span>为display:inline，因此您添加的边框和填充实际上并未影响其大小。所以只有第一行受到影响。

在范围内使用display:block，<span>现在就像<p>和<div>一样。

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

如何在一个多行包装句子中的每一行添加水平填充？

7 个答案: