<p>Ever since switching from TABLE-layout to DIV-layout, one common problem remains:</p>

<p><strong>PROBLEM</strong>: you fill your DIV with dynamic text and inevitably there is a super-long word that extends over the edge of your div column and makes your site look unprofessional.</p>

<p><strong>RETRO-WHINING</strong>: This <em>never</em> happened with table layouts. A table cell will always nicely expand to the width of the longest word. </p>

<p><strong>SEVERITY</strong>: I see this problem on even the most major sites, especially on German sites where even common words such as "speed limit" are very long ("Geschwindigkeitsbegrenzung"). </p>

<p>Does anyone have a workable solution to this?</p>

Two fixes:
```
overflow:scroll
```
-- this makes sure your content can be seen at the cost of design (scrollbars are ugly)
```
overflow:hidden
```
-- just cuts off any overflow. It means people can't read the content though.
If (in the SO example) you want to stop it overlapping the padding, you'd probably have to create another div, inside the padding, to hold your content.
Edit: As the other answers state, there are a variety of methods for truncating the words, be that working out the render width on the client side (never attempt to do this server-side as it will never work reliably, cross platform) through JS and inserting break-characters, or using non-standard and/or wildly incompatible CSS tags (
```
word-wrap: break-word
```
doesn't appear to work in Firefox
).
You will always need an overflow descriptor though. If your div contains another too-wide block-type piece of content (image, table, etc), you'll need overflow to make it not destroy the layout/design.
So by all means use another method (or a combination of them) but remember to add overflow too so you cover all browsers.
Edit 2 (to address your comment below):
Start off using the CSS
```
overflow
```
property isn't perfect but it stops designs breaking. Apply
```
overflow:hidden
```
first. Remember that overflow might not break on padding so either nest
```
div
```
s or use a border (whatever works best for you).
This will hide overflowing content and therefore you might lose meaning. You could use a scrollbar (using
```
overflow:auto
```
or
```
overflow:scroll
```
instead of
```
overflow:hidden
```
) but depending on the dimensions of the div, and your design, this might not look or work great.
To fix it, we can use JS to pull things back and do some form of automated truncation. I was half-way through writing out some pseudo code for you but it gets seriously complicated about half-way through. If you need to show as much as possible, give
hyphenator
a look in (
as mentioned below
).
Just be aware that this comes at the cost of user's CPUs. It could result in pages taking a long time to load and/or resize.