CSS在換行前創建填充

是否可以在換行前添加填充？如從，從這 enter image description here 到這。CSS在換行前創建填充

當前的CSS代碼：

span.highlight { background: #0058be; color: #FFF; padding: 2px 5px; }

來源

2011-05-23 Gajus

我不認爲這是可能的，沒有使用一些JavaScript ......雖然很好的問題。 – Midas 2011-05-23 16:41:52

好吧，我也沒有想出一個JavaScript解決方案。歡迎您提出建議。 – Gajus 2011-05-23 19:00:25

您是否已經自己制定瞭解決方案？如果是這樣，你想與我們分享嗎？ – NGLN 2011-06-07 21:14:34

-1

最接近的事，如果真的事項多，我會說是增加display: inline-block;

來源

2011-05-23 16:48:05 Fredrik

這比「block」更好嗎？兩者都會產生相同的結果。 – Gajus 2011-05-23 19:04:33

不，它不。請查看以下內嵌塊的解釋：http://www.quirksmode.org/css/display.html#inlineblock – Fredrik 2011-05-23 19:13:40

但是，根據周圍元素的寬度，當然可能看起來完全相同。 – Fredrik 2011-05-23 19:16:08

display: block將實現你想要的部分，但當然將會使span成爲一個塊元素，所以你不會在你的例子中看到包裝行爲。

您的屏幕截圖包含了您需要嘗試做的事情：您需要在「正常」段落文本的左右邊緣添加邊距，然後讓span忽略此操作（並且包含其填充），與您的其他文字相比，實現藍色突出顯示的「突出」。你不能在你的跨度上使用直接的CSS，因爲它覆蓋了兩行，顯然「左」和「右」只是指跨度，而不是其中包含的單個文本片段。

直CSS不是這裏的答案。你可能想看看這個問題，它使用一個jQuery filter搶到一個實體的第一個字，等：

jQuery first word selector

來源

2011-05-23 16:51:05 Ben

它採取了一些試訓，但在這裏它是：the single- and multi-line highlighter with additional padding。

HTML：

<h3>Welcome to guubo.com, Gajus Kuizinas</h3> 
<p><span>So far you have joined: </span><em>Networks guubo.com</em><ins></ins></p>

CSS：

h3 { 
    padding-left: 5px; 
} 
p { 
    background: #0058be; 
    position: relative; 
    padding: 0 5px; 
    line-height: 23px; 
    text-align: justify; 
    z-index: 0; 
} 
p span { 
    background: #fff; 
    padding: 2px 0 2px 5px; 
    position: relative; 
    left: -5px; 
} 
p em { 
    background-color: #0058be; 
    color: #fff; 
    padding: 2px 5px; 
} 
ins { 
    position: absolute; 
    width: 100%; 
    line-height: 23px; 
    height: 23px; 
    right: -5px; 
    bottom: 0; 
    background: #fff; 
    z-index: -1; 
}

訣竅是風格的藍色背景全段，只有放白色背景上最重要的是在開始和結束。這樣做保證了藍色背景別處...;）

兩個主要的缺點：

突出顯示的文本具有在第一行開始（但不一定有流入第二），
該段落必須與理由相符。

在Opera 11，Chrome 11，IE7，IE8，IE9，FF4和Safari 5中通過了所有DTD的測試。

查看以前不太成功的嘗試的編輯歷史記錄。

來源

2011-05-23 20:14:48 NGLN

當您在您提供的jsfiddle演示中使視口更小時，這會變得有點奇怪，但第一眼看起來似乎沒問題。 – 2011-05-24 23:34:54

確實很奇怪，但這是詢問者的要求。但我懷疑短文是關注的，那麼它並不是那麼瘋狂。 – NGLN 2011-05-25 16:13:24

如果您在內容中動態加載，那麼該怎麼辦？ – Owen 2012-07-06 15:18:19

也許你可以使用這種技術。 http://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/

來源

2011-08-08 22:09:37 Esben

歡迎來到堆棧溢出！雖然這可能在理論上回答這個問題，[這將是更可取的]（http://meta.stackexchange.com/q/8259）在這裏包括答案的重要部分，並提供供參考的鏈接。 – Kev 2011-08-09 11:42:32

我不得不增加一個額外的margin-left:0;使兩條線在同一點上開始。

這可以用純CSS完成。在相同顏色的高亮區的左側和右側創建一個堅實的box-shadow（並使用margin更正間距）。爲你的情況：

span.highlight { 
    background: #0058be; 
    color: #FFF; 
    box-shadow:5px 0 0 #0058be, -5px 0 0 #0058be; 
    padding: 2px 0; 
    margin:0 5px; 
}

來源

2012-08-16 12:28:53 Tonez

真棒，不會想到我自己的。 – 2013-12-18 06:03:33

任何工作jsfiddle？因爲我失敗了。 – 2013-12-20 22:36:47

你可以使用只是盒子陰影，沒有凌亂的填充或邊距來實現這一點。

訣竅是使用箱形陰影的spread option，並且包裝的內聯元素上的填充行爲與您的期望相同。

.highlight { 
    background: black; 
    color: white; 
    box-shadow: 0 0 0 5px black; 
}

來源

2013-08-17 17:49:15

CSS在換行前創建填充

回答

相關問題