Trouble with CSS 'overflow' property

Question

I have the following HTML / CSS:

<table>
    <tr>
        <td>
            <div>
                <pre>
                    <code>
This is a test!
This is a very long line that is designed to exceed the length of the visible area of the page. This is a very long line that is designed to exceed the length of the visible area of the page.
                    </code>
                </pre>
            </div>
        </td>
    </tr>
</table>

As expected, the second line of content exceeds the visible area of the page. However, I do not want this to happen, so I've modified the <code> line to look like this:

<code style="overflow: hidden;">

However, the content still exceeds the visible page length. I simply want the text truncated. I have tried moving overflow: hidden to other tags, but still no luck.

Here is the example on jsfiddle.net where you can see it in action and play around with it.

Note: I need to have the <pre> be the exact width of the page (in the example above, assume the table is the width of the page).

Edit: the extra tags are there because I have omitted some other code that doesn't apply - and without the table, the problem doesn't manifest itself

@George - As far as I know, yes. The div just needs something to indicate when overflow is occurring. If there's no explicit "edge", then the element will just keep resizing automatically. — Ben
– Ben, Commented Nov 5, 2010 at 3:04
I think I found a rather complicated solution. See here: jsfiddle.net/yYGRP/19 — Nathan Osman
– Nathan Osman, Commented Nov 5, 2010 at 3:20

Robusto · Accepted Answer · 2010-11-05 02:16:50Z

4

div {
   width: 300px; /* or pick a width */
  overflow: hidden;  
}

does the trick.

But I have to say, what an odd amalgam of markup. For one thing, why do you even need the table?

answered Nov 5, 2010 at 2:16

Robusto

32k8 gold badges59 silver badges79 bronze badges

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

3 Comments

Nathan Osman Over a year ago

I need it because I'm intentionally omitting some of the other code that doesn't apply.

Chase Florell Over a year ago

is it tabular data? if it's layout in any way, you can do away with tables completely. Tables should only be used for tabular data... you know... the crap that looks like spreadsheets.

Nathan Osman Over a year ago

@rock: No, it's part of something else. (Not tabular data, but something that DIVs cannot be used for.)

Chase Florell · Accepted Answer · 2010-11-05 03:05:02Z

1

All you need to do is give the <div> tag a width attribute. Then you'll be set.

<div style="width:200px; overflow:hidden;">
    <pre>
        <code>This is a test!
            This is a very long line that is designed to exceed the length of the visible area of the page.  This is a very long line that is designed to exceed the length of the visible area of the page. 
        </code>
    </pre>
</div>

Oh... and do away with the table.

HERE IS YOUR UPDATED JSFIDDLE

EDIT:

If you need to have the width the exact same width as the page, you can do some JavaScript magic to get the innerWidth

http://www.javascripter.net/faq/browserw.htm

So you simply set the <div> width to the innerWidth of the page. Then all of the content inside the Div will be the appropriate width for you.

edited Nov 5, 2010 at 3:05

answered Nov 5, 2010 at 2:24

Chase Florell

47.6k59 gold badges192 silver badges382 bronze badges

2 Comments

Nathan Osman Over a year ago

+1 for being helpful... unfortunately, I need the <pre> to be the exact width of the page, which may vary.

Nathan Osman Over a year ago

Thanks! This is the closest it looks like I'll get to what I'm aiming for.

Zain Shaikh · Accepted Answer · 2010-11-05 02:18:22Z

1

You shall wrap your pre and code tags inside a div tag, since div tags more easily handles the ovreflow property. and you'll also need to specify the width and height of div, because overflow property does not work without width and height.

<table>
<tr>
    <td>
        <div style="overflow: hidden; width: 200px; height: 200px">
            <pre>
                <code>
This is a test!
This is a very long line that is designed to exceed the length of the visible area of the page. This is a very long line that is designed to exceed the length of the visible area of the page. 
               </code>
            </pre>
        </div>
    </td>
</tr>
</table>

answered Nov 5, 2010 at 2:18

Zain Shaikh

6,0636 gold badges44 silver badges67 bronze badges

Comments

Chase Florell · Accepted Answer · 2010-11-05 02:30:47Z

0

display:block;
width:200px;
overflow:hidden

if you don't want to use div.

edited Nov 5, 2010 at 2:30

Chase Florell

47.6k59 gold badges192 silver badges382 bronze badges

answered Nov 5, 2010 at 2:28

fhj

1702 bronze badges

1 Comment

Chase Florell Over a year ago

please format your code blocks properly so that they make more sense.

Collectives™ on Stack Overflow

Trouble with CSS 'overflow' property

4 Answers 4

3 Comments

EDIT:

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

EDIT:

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related