khoảng

Question

Tôi có một thiết kế tôi muốn thực hiện có liên quan đến văn bản tiêu đề xuất hiện với màu sắc riêng của mình nền, đệm bằng 10px, qua một hình ảnh, mệnh dụ:

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

Các Ví dụ đầu tiên trong bức tranh này hoạt động tốt, và rất đơn giản:

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

Rắc rối nảy sinh khi các văn bản tràn vào dòng khác, sau đó các yếu tố khoảng đệm không ảnh hưởng đến các văn bản trên ngắt dòng, nó ám như vậy:

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

Bất cứ ai biết về một sự thay thế, hoặc làm thế nào họ sẽ thiết lập thiết kế này ra để màu nền & đệm là phù hợp?

Cảm ơn trước

Edit: Tôi đã được đơn giản hóa mã để làm cho nó ngắn gọn, nhưng đã bỏ lỡ một phần quan trọng. Trên thực tế nó là như thế này:

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

Với html như:

<div class="greenbox"> 

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

</div> 

Như vậy span vẫn inline, được bọc trong một vị trí neo tuyệt đối.

Answer 1

Tôi đã giải quyết một cái gì đó tương tự như trước đây: Add padding at the beginning and end of each line of text

Tôi đã cướp giải pháp mà từ bản thân mình, và phù hợp với nó để trường hợp của bạn.

Lưu ý rằng các điều chỉnh line-height và padding có thể là rất phức tạp để bắt đầu.

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

Answer 2

Cách nào dễ dàng là thêm border bên trái của một liên kết và sau đó thêm hai wr appers, sau đó vị trí đầu tiên bên trái và thứ hai trở lại bên phải, vì vậy nó sẽ như thế nào đó như thế: http://jsfiddle.net/kizu/fNGgN/4/