make text bigger than containing box - css

Im trying to get a text to appear as though it is too big for the containing box that it is in.

It is a bit hard to describe so here is a picture i made.

I want to try to get around making images for 开发者_运维技巧them, but i could if its not possible with css.

I have a scenario setup with jsfiddle, even though there isnt any js involved. Its a useful tool :]

http://jsfiddle.net/Lv2EE/

I tried to do some fancy positioning where the <span> tag would be positioned under the <h4> but that didnt work because the H4 collapses when i did that.

any ideas?

Here you go:

Live Demo

HTML:

<h4>Hello</h4>

CSS:

h4 {
    background-color:#00a2e8;
    font-family:Arial,sans-serif;
    font-size:5em;
    line-height:0.6em;
    padding:0 0 2px 0;
    font-weight:bold;
    overflow:hidden;
    color:#99d9ea
}

Something like this? http://jsfiddle.net/7hmfJ/10/

Here's an alternative, using a container div to clip the child header element: http://jsfiddle.net/Lv2EE/3/

HTML:

<div class="clip"><h4>Sidebar</h4></div>

CSS:

h4 { 
position : relative; 
top : -30px; 
background-color : #345678; 
color : white; 
font-size : 4.5em; 
overflow : hidden; }

.clip { 
display : block; 
height : 30px; 
overflow : hidden; 
}

This should work properly across browsers; I included the 'display : block' so it could work with <span> as well.