Question

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?

Answer 1

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.