CSS或JavaScript將背景顏色僅放入段落的一部分

-2

以下是我目前爲止在此處的the link以在線查看它。CSS或JavaScript將背景顏色僅放入段落的一部分

p { line-height: 2; } 
.highlight { background-color: yellow; }

Screen capture

目標是包裹引述內容，如以下（無邊框是必要的，但我想整個背景，包括線之間的空間進行着色）

我看到圖片不清楚，但我希望你能弄清楚這個想法。

Screen Capture (Goal)

當前版本僅突出了線和線之間的空間（由於線高度爲高度大於1）不突出顯示。

有沒有什麼辦法可以在CSS或JavaScript中實現這一點？

來源

2015-05-29 msk

你可以嘗試這樣做與CSS的形狀，但它的[不完全支持的功能]（http://caniuse.com/#feat=css-shapes） – Amit

請在問題 – Mustaghees

@Amit中包含相關的HTML和CSS所以這是不可行的（或至少實際上）。對？ – msk

這樣做的一種方法是給標記的文本一個頂部和底部填充。

p {line-height:2} 
 
mark {padding:.5em 0}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
<mark>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</mark> 
 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

來源

2015-05-29 06:11:13

哇..很有前途！非常感謝你 – msk

感謝你的解決方案，現在網站顯示報價更好。請親自看看。 http://buk.io/@1400/13/2487:0:62~2487:0:220 – msk

嗨，你可以使用span標籤，並設置跨度的背景，因此它會像

<p>this is the dummy text without any background <span style='background:yellow'> This text with the background colour</span> this text have no background</p>

來源

2015-05-29 06:12:52 Mitul

不，這就是當前版本正在做的，並且有白色（段落的背景）是可見的，以便行之間的空間不突出顯示。你會看到兩條黃線，而不是一條黃線。 – msk

@msk我已測試它會顯示高亮顏色的空間https://jsfiddle.net/patelmit69/79z9065r/ – Mitul

請設置「行高」大於1.謝謝。 – msk

CSS或JavaScript將背景顏色僅放入段落的一部分

回答

相關問題