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

Answer 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.