span background-color&填充问题 [英] span background-color & padding problems

问题描述

我想要实现的设计涉及标题文本，其背景颜色以10px填充， href =http://i.stack.imgur.com/E7EpS.png> http://i.stack.imgur.com/E7EpS.png

这张图片的第一个例子很好，很简单：

  .greenbox {width：520px; height：261px; position：relative;} 
 .greenbox span {padding：0 10px;背景：＃000; position：absolute; left：0; bottom：40px; } 
  

当文本溢出到另一行时出现问题，然后span元素填充不会影响文本在换行符上，它呈现如下：

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

任何人都知道一个替代品，或者他们如何设置这个设计，使背景颜色& padding is consistent？

提前感谢

编辑：我简化了代码以使其简洁，错过了一个重要部分。实际上是这样的：

  .greenbox {width：520px; height：261px; position：relative;} 
 .greenbox a {position：absolute; left：0; bottom：40px; } 
 .greenbox span {padding：0 10px;背景：＃000; } 
  

使用html as：

 < div class =greenbox> 
 
< a href =link>< span>标题在这里< / span>< / a& 
 
< / div> 
  

因此，范围保持内联，包裹在绝对位置锚中。

解决方案

我已经处理过类似的东西：在每行文本的开头和结尾添加填充

我已经从自己那里抢走了这个解决方案，并适合你的情况。

注意 line-height 和 padding 调整可能会非常棘手。

请参阅： http://jsbin.com/ahoyug

HTML：

  ; div class =greenbox> 
< a href =＃>< span>< span> 
标题在这里溢出
< / span>< / span>< / a> 
< / div> 
  

CSS：

  .greenbox {width：500px; height：200px;位置：相对; 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 
} 
  

I have a design I want to implement that involves title text appearing with its own background color, padded by 10px, over an image, par example:

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

The first example in this picture works well, and is simple:

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

Trouble arises when the text overflows onto another line, then the span elements padding does not effect the text on the line breaks, it renders like so:

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

Anyone know of an alternative, or how they would set this design out so that the background color & padding was consistent?

Thanks in advance

Edit: I had simplified the code to make it concise, but had missed a vital part. Actually it's like this:

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

With the html as:

<div class="greenbox">

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

</div>

Thus the span remains inline, wrapped in a absolute position anchor.

解决方案

I've tackled something similar before: Add padding at the beginning and end of each line of text

I've robbed that solution from myself, and fit it to your case.

Note that the line-height and padding adjustments can be very tricky to get right.

See: 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
}

这篇关于span background-color&填充问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！