如何將水平填充添加到一個多行包裝語句中的每一行？

這是我的代碼：如何將水平填充添加到一個多行包裝語句中的每一行？

<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

如何將水平填充添加到一個多行包裝語句中的每一行？

回答

相關問題