我想要多行文本,这只是一个元素,有一个尊重背景填充的背景层。结果,我想要这个:http://d.pr/i/ImRS
我得到的是 http://jsfiddle.net/bqfk2/或 http://jsfiddle.net/Jmk4D/2/ (后者来自 this question )这都不是我想要的:第一个示例在行的开头和结尾没有左/右填充,第二个示例需要多个元素。
<div>
<p>desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<style>
div {
font-size: 2em;
background: #fff;
border: 1px solid #ccc;
padding: 1em;
width: 300px;
}
div > p {
background: yellow;
display: inline;
line-height: 1.4em;
}
</style>
我也接受一个解决方案,将文本分成多个元素,这些元素仍然对应于原始文本换行符(尊重每种字体)。目标应该不是让用户将文本分成几部分,但仍然有这种效果。
最佳答案
试试 Box-shadow,
div {
font-size: 2em;
background: #fff;
border: 1px solid #ccc;
padding: 1em;
width: 300px;
}
div > p {
background: yellow;
display: inline;
line-height: 1.4em;
box-shadow:0.5em 0 0 #ff0, -0.5em 0 0 #ff0;
-moz-box-shadow:0.5em 0 0 #ff0, -0.5em 0 0 #ff0;
-webkit-box-shadow:0.5em 0 0 #ff0, -0.5em 0 0 #ff0;
}
关于javascript - 内联文本背景颜色,无需划分为单独的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19054600/