我有一个内联元素,其中包含换行符.它的四面都有衬垫.但是,断线处切割元素的边填充不存在.
这就是我的意思:
应该有在右侧20像素填充标签和离开的有,但心不是.我可以看到这个工作的唯一另一种方法是,如果我为每一行创建一个新元素,但这个内容将动态生成,不会在固定宽度的容器中,所以我没有看到这个工作.有没有其他方法我可以在没有任何JavaScript的CSS中做到这一点？
我希望最终结果如下所示:http: //jsfiddle.net/GNsw3/
但没有任何额外的元素
我也需要这个只使用显示内联,因为我希望背景环绕文本,因为内联块不会这样做
这可能吗？
编辑,修改示例以使我想要的更明显:
目前 http://jsfiddle.net/4Gs2E/2/
我希望它看起来像 http://jsfiddle.net/GNsw3/1/
在某些情况下,您可以使用box-shadow解决方法.
将padding元素的右侧和左侧移动到其父级并添加两个box-shadows.
结果:http://jsfiddle.net/FpLCt/1/
浏览器支持box-shadow:http://caniuse.com/css-boxshadow
更新:
这个问题还有一个新的css属性叫做box-decoration-break.它目前仅受Opera支持,但希望更多的浏览器很快就能实现.
希望这可以帮助