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

---

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?

---

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.

---

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>

---

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

if you don't want to use div.