CSS overflow and word-wrap behaviour not helping me at all

Question

You can see how the filename field should look at http://www.plifk.com/henvic/114 and how it breaks the layout at http://www.plifk.com/henvic/159

If I used 108574main-neutron-star-and-a-very-bad-overfow-will-happen-here-so-sad.mpg I would not get an overflow, but in the first line "108574main-neutron-star-and-a-very-" and in the second line a "bad-overfow-happens.mpg". What can I do to avoid getting an overflow?

Please know that I don't want to use quirks (like PHP's wordwrap, neither JavaScript if possible) and I've tried some ways in CSS with word-wrap, etc, but nothing worked out.

I've also tried word-break: break-all (tested on Firefox only) but it didn't work also.

Even the overflow: hidden; is not working... I'm not very familiar with web designing (indeed I try to do everything by the standards, etc) and I'm completely lost right now.

The uncompressed CSS file can be seen at http://pastebin.ca/1802451

Now... I really understand that this is expected once the word-wrap is supposed for text, not characters. But hey, even with break-all it doesn't do anything. How can?

Thank you very much in advance.

Answer 1

You can set #metasidebar {overflow: hidden;}. That'll work. Not sure you like how it cuts the text, but at least it doesn't overflow.

You could also try to cut the filename or insert breakpoints in php. Something like:

if(strlen($filename) > self::MAX_FILENAME_LENGTH) {
   // Make some smart splitting, or just insert a dash at a given length,
   // since rendering engines can line-break on dash
}