Expand text outside of container - html

Question

I am trying to figure out how to expand my text outside of its container. The desired effect is to have a the text expand larger than its container. Ex.//
I'm not sure how to start with this. I'm new to HTML and CSS and could use some help :)

Answer 1

Here's one way of doing it:
<div class="container"><span>EXAMPLE</span></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
​.container {
background: #ddd;
font-size: 30px;
width: 130px;
height: 15px;
overflow: hidden;
}
.container span {
position: relative;
top: -10px;
left: -7px;
}
http://jsfiddle.net/ZnxrT/
Note: The top/left offsets are arbitrary units. You would need to tweak them to suit your requirements.

Answer 2

You should apply a fixed size to the box containing the text: EXAMPLE.
After that you should put the text in the middle and size the letters so the are larger than the space of the box and apply an overflow: hidden
It should be something like that:
.box{
width: 50px;
height: 10px;
overflow: hidden;
margin: auto;
background-color: gray;
}
.text{
color: red;
font-size: 14px;
text-align:center
vertical-align:middle;
}

Answer 3

Here is a working example
http://jsfiddle.net/8CaQx/
<div id="outer"><div id="inner">TEXT</div></div>​
#outer {
height: 36px;
width: 140px;
overflow: hidden;
background-color: black;
}
#inner {
position: relative;
top: -18px;
left: -10px;
font-size: 60px;
text-align: center;
vertical-align: middle;
font-family: arial, sans serif;
font-weight: 900;
color: red;
}​

Answer 4

You are probably looking for the CSS overflow property.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Please see this fiddle for the code to recreate the above example: http://jsfiddle.net/E5atK/