Overflow Hidden does not appear to be working

Question

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

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.

rob · Accepted Answer · 2014-07-16 17:51:58Z

2

Add this to the .container

white-space:nowrap;

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

answered Jul 16, 2014 at 17:51

7342 gold badges8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

i think OP wants each word one below the other.

@Alek if that's the case then why is OP asking this question

OP said inline elements..?

Alex Char · Accepted Answer · 2014-07-16 17:55:52Z

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

Nalaka526 · Accepted Answer · 2014-07-16 17:56:39Z

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

robin00212 · Accepted Answer · 2014-07-16 18:15:24Z

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

Cheruvian · Accepted Answer · 2014-07-16 17:51:30Z

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

CSS:

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