CSS或JavaScript将背景颜色仅放入段落的一部分

问题描述:

以下是我目前为止在此处的the link以在线查看它。CSS或JavaScript将背景颜色仅放入段落的一部分

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

Screen capture

目标是包裹引述内容,如以下(无边框是必要的,但我想整个背景,包括线之间的空间进行着色)

我看到图片不清楚,但我希望你能弄清楚这个想法。

Screen Capture (Goal)

当前版本仅突出了线和线之间的空间(由于线高度为高度大于1)不突出显示。

有没有什么办法可以在CSS或JavaScript中实现这一点?

+0

你可以尝试这样做与CSS的形状,但它的[不完全支持的功能](http://caniuse.com/#feat=css-shapes) – Amit

+0

请在问题 – Mustaghees

+0

@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>

+0

哇..很有前途!非常感谢你 – msk

+0

感谢你的解决方案,现在网站显示报价更好。请亲自看看。 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> 
+0

不,这就是当前版本正在做的,并且有白色(段落的背景)是可见的,以便行之间的空间不突出显示。你会看到两条黄线,而不是一条黄线。 – msk

+0

@msk我已测试它会显示高亮颜色的空间https://jsfiddle.net/patelmit69/79z9065r/ – Mitul

+0

请设置“行高”大于1.谢谢。 – msk