css – 跨背景颜色和填充问题

我有一个我想实现的设计,涉及标题文本出现与自己的背景颜色,填充10px,在一个图像,参数示例：

http://i.stack.imgur.com/E7EpS.png

这张照片的第一个例子很好,很简单：

.greenBox {width:520px; height:261px; position:relative;}
.greenBox span { padding:0 10px; background:#000; position:absolute; left:0; bottom:40px; }

当文本溢出到另一行时出现问题,那么跨度元素填充不会影响换行符上的文本,它会像这样呈现：

http://i.stack.imgur.com/pY18f.png

任何人都知道一个替代方案,或者他们如何设置这个设计,使背景颜色&填充是一致的？

提前致谢

编辑：我简化了代码,使之简洁明了,但是错过了重要的一部分.其实是这样的：

.greenBox {width:520px; height:261px; position:relative;}
.greenBox a {position:absolute; left:0; bottom:40px; }
.greenBox span { padding:0 10px; background:#000; }

用html作为：

<div class="greenBox">

    <a href="link"><span>The Title Goes Here</span></a>

</div>

因此,跨度保持内联,包裹在绝对位置锚.

解决方法

我已经解决了类似的事情： Add padding at the beginning and end of each line of text

我已经抢救了自己的解决方案,适合你的情况.

请注意,线高和填充调整可能非常棘手,以获得正确的.

见：http://jsbin.com/ahoyug

HTML：

<div class="greenBox">
    <a href="#"><span><span>
        The Title Goes Here,with overflow
    </span></span></a>
</div>

CSS：

.greenBox {width:500px; height:200px; position:relative; background:green}

.greenBox > a {
    font: 50px sans-serif;
    line-height: 1.14;
    padding: 0;
    border-left: 20px solid #000;
    position: absolute;
    left: 0;
    bottom: 60px;
    text-decoration: none;
    color: #fff
}
.greenBox > a > span {
    background: #000
}
.greenBox > a > span > span {
    position: relative;
    left: -10px
}

css – 跨背景颜色和填充问题

解决方法

猜你在找的CSS相关文章