CODEWITHSUNDEEP
htmlcss
link
link

Reputation: 2510

Overflow Hidden does not appear to be working

I have an issue where overflow:hidden; does not seem to be working.

I am trying to make it such that several inline elements wrapped in a div get cut off through overflow: hidden; at 20 pixels

Markup:

<div class="container">
    <span>Hello World 1</span>
    <span>Hello World 2</span>
    <span>Hello World 3</span>
</div>

CSS:

.container {
    width: 20px;
    overflow: hidden;
}

fiddle: http://jsfiddle.net/7XHPC/

The code shows the Hello World inline elements wrapping around the container and not getting cut off via overflow: hidden;

Any advice would be appreciated. Thanks.

Upvotes: 0

Views: 78

Answers (5)

robin00212
robin00212

Reputation: 91

You need to set a width to the span tags, and also make them display as block.

.container {
    width: 20px;
    overflow: hidden;
}
.container span {
    width:200px;
    display:block;
}

Upvotes: 0

Nalaka526
Nalaka526

Reputation: 11464

You can also achieve this with two wrapper divs

HTML

<div class="outer-container"> 
    <div class="container">
        <span>Hello World 1</span>
        <span>Hello World 2</span>
        <span>Hello World 3</span>
    </div>
</div>

CSS

.outer-container {
    width: 20px;
    overflow: hidden;
}
.container {
    width: 100px;
}

JSFiddle

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

I think you want each word one below the other so i suggest this:

css

.container {
  max-width:20px;
  overflow: hidden;
  display:table-cell;
}

div > span{
    white-space: nowrap;
}

fiddle

Upvotes: 2

rob
rob

Reputation: 734

Add this to the .container

white-space:nowrap;

Demo: http://jsfiddle.net/robcabrera/x6VSL/1/

Upvotes: 2

Cheruvian
Cheruvian

Reputation: 5867

You need to add a height. Otherwise the height automatically adjusts to fit the content.

CSS:

 .container {
     width: 20px;
     overflow: hidden;
     height: 50px;
 }

Upvotes: -1

Related Questions