如何将水平填充添加到一个多行包装语句中的每一行？

这是我的代码：如何将水平填充添加到一个多行包装语句中的每一行？

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

这是它目前的样子：

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

有没有办法来添加填充到高亮文本的立场吗？ SPAN上的常规填充不起作用，因为它只考虑句子的开始和结束，而不是单独分开每行。

任何想法？ CSS3代码很好。

来源

2010-06-22 Marc

只是为了澄清，你找换行文本的每一行以不同的方式填补？如果没有，为什么不把填充应用到div标签？ – JohnFx 2010-06-22 20:40:49

以及我差不多一年后，但我正在寻找完全相同的东西.. – pasine 2011-03-25 15:43:45

看看这个解决方案 - http://stackoverflow.com/a/34660112/483779 – Stickers 2016-04-05 22:50:53

挣扎了一段时间后，我发现与旧版本浏览器一个像样的回退非古怪的解决方案 - 将两个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; 
}

来源

2011-12-02 08:08:07

谢谢。正是我在找什么。 – Marc 2011-12-13 19:51:35

似乎是唯一的方法。这是完美的 – Ben 2012-07-13 09:52:48

这对于一项常见任务来说确实是一个非常棒的简单解决方案。 – klickreflex 2012-10-05 08:13:57

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

来源

2010-06-22 20:41:39

我想垫黄色条文字，所以文字并不那么贴近。示例模型：http://i50.tinypic.com/206dlef.png 向P添加填充时，它只是将整个填充添加到块中。但是，我想将填充添加到单独的文本行中。我开始认为这是不可能的，因为文字的线路已被解释为一个元素，但我的想法工作，它需要单独解释文本的每一行的水平填充工作。 – Marc 2010-06-23 11:45:34

但不幸的是，我不能为每一行创建单独的元素，因为它们是动态创建的，我不知道“折断”点提前。理想的情况下会有一个：每行伪选择，我可以用它来垫每一行单独。 – Marc 2010-06-23 11:50:15

尝试inline-block。它不会在任何超过IE8（though there are some work arounds）更早的版本，但一切流行的应该是罚款：

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

来源

2010-06-23 23:20:59 robertc

不幸的是，这也不起作用。它只是创建一个块元素，并不清除它的兄弟姐妹。实际上，这意味着我得到一块黄色，而不是黄色的线条。 – Marc 2010-06-23 23:47:54

哦，我明白了。然后我认为你想要的是不可能的 - 根据其性质填充适用于块。某种类型的jQuery解决方案可以在适当的位置添加不间断空间，这是唯一的方法。 – robertc 2010-06-24 12:30:03

太糟糕了。我想我会像现在这样离开它。感谢您的帮助。 – Marc 2010-07-05 16:15:26

white-space: pre-wrap;

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

来源

2010-11-03 22:07:25 Lutsen

谢谢。这确实不能解决问题，但增加的空间确实帮助我实现了我的目标。 – Marc 2010-11-04 17:24:50

-1

添加两个CSS3，阴影作为代替建议，这里是一个更简单的答案：

使用display:block

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

使用display:block的跨度和<span>现在的作品像<p>和<div>。

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

来源

2013-05-28 08:47:27

这不是OP想要的...如果你这样做，没有“突出”效果，它看起来像一个简单的盒子。 – Arkana 2013-05-28 08:58:21

终于找到了出路这种痛苦。为我工作。像这样使用左侧的按钮。

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

来源

2016-04-15 15:00:23

如何将水平填充添加到一个多行包装语句中的每一行？

回答

相关问题