In this case, IE has a working CSS property and Firefox didn't implement it, because it didn't make it into the CSS 2.0 spec - even though its been in their bug database forever. Forget about the rivalry - what about the damned consumer! And please don't hand me this "Get Firefox, IE sucks" crap. It ain't rocket science to all get together and agree on CSS handling that works with everybody's product. Really, this kind of immature crap from the browser manufacturers has to stop. This will force long urls (for example) that have no spaces in them to wrap to the specified width automatically (even breaking in the middle of a word) and not throw the widths of your tables or divs all to hell.
Also, you may need to remove or comment - out the "white-space" elements in the style, as they can mess up the rendering of lines in Mozilla browsers. Otherwise, it seems to behave nicely in IE, Firefox, and Opera. The only issue I found with this is that if you want a table column to observe your stated width, you must apply this class to EVERY CELL IN THE COLUMN. Remove the width attribute in that case, and set the width in the TD element itself. HardBreak class designator above withĪnd the style would automatically apply to all TD elements. Word-wrap: break-word /* Internet Explorer 5.5+ */
White-space: -moz-pre-wrap /* Mozilla, since 1999 */ * this will force a column to be no wider than 300px,īreaking words in the middle of a long word if necessary. The style declaration (I call it my HardBreak class): Here's a partial fix, which will work for most tables and browsers. Firefox literally - (and I consider this completely idiotic, since it's been in their bug database for FIVE YEARS) does not have a reliable CSS style element to force table cell content to break in the middle of a word in order to stop the content from expanding your table / div off the page or over other content on the page. But that doesn't necessarily help you with Firefox right now. IE has had a proprietary "word-break" style attribute for a long time, and this made it into the CSS 3.0 spec. In most cases that's going to take care of 98 percent of your total site traffic. The two biggest players are of course Internet Exploder and Firefart (as I lovingly like to refer to each). I tried using word-wrap in the table cell, but it only worked in Internet Explorer 9, (and Firefox and Google Chrome of course) mainly trying to fix the broken Internet Explorer browser here.One of the most annoying things a developer (who would normally delight in writing code, not futzing with markup) can have is getting rendering issues between different browsers. Just thought I'd share this with others, maybe it will help someone else with a two-column definition style layout, with trouble getting the words to wrap. Using floating word-wrap and margin left, I got exactly what I needed. Mi nec orci tempor sit amet luctus dui convallis. Laoreet ante et turpis vulputate condimentum. Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla See for more info.įusce ultricies mi nec orci tempor sit amet
Warning: when inserting additional characters, you should not separate multiple code points within grapheme. Although this solution can be seen in some well known web applications, avoid if possible. If the clipboard text is later used in some search function in the web app. However, it does affect text copied into clipboard (these characters are of course copied as well). Warning: inserting additional, zero-length characters does not affect reading. Looooooooooooooooooo oooooooooooooooooooo oooooooooooooooooooo oooooooooooooooooooo oooooooooooooooooooo oooooooooooooooooooo oooooooooooooooooooo oooooooooooooooooooo oooooooooooooooooooo oooooooooooooong word