CODEWITHSUNDEEP
htmlcss
grmdgs
grmdgs

Reputation: 585

Expand text outside of container

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.// text expanding outside of its container

I'm not sure how to start with this. I'm new to HTML and CSS and could use some help :)

Upvotes: 0

Views: 976

Answers (4)

Jonathan Nicol
Jonathan Nicol

Reputation: 3298

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.

Upvotes: 2

jwatts1980
jwatts1980

Reputation: 7356

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;
}​

Upvotes: 1

Shawn Wernig
Shawn Wernig

Reputation: 1742

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/

Upvotes: 0

Nuxy
Nuxy

Reputation: 384

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;
}

Upvotes: 2

Related Questions