StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POword wrap in css / js
text
Body
copied!<p>I'm looking for a cross-browser way of wrapping long portions of text that have no breaking spaces (e.g. long URLs) inside of divs with pre-determined widths.</p> <p>Here are some solutions I've found around the web and why they <strong>don't</strong> work for me:</p> <ul> <li><strong>overflow : hidden / auto / scroll</strong> - I need the entire text to be visible without scrolling. The div can grow vertically, but not horizontally.</li> <li><strong>Injecting &shy; into the string</strong> via js / server-side - &shy; is supported by FF3 now, but copying and pasting a URL with a &shy; in the middle will not work in Safari. Also, to my knowledge, there isn't a clean method of measuring text width to find out the best string offsets to add these characters to (there's one hacky way, see next item). Another problem is that zooming in Firefox and Opera can easily break this.</li> <li><strong>dumping text into a hidden element and measuring offsetWidth</strong> - related to the item above, it requires adding extra characters into the string. Also, measuring the amount of breaks required in a long body of text could easily require thousands of expensive DOM insertions (one for every substring length), which could effectively freeze the site.</li> <li><strong>using a monospace font</strong> - again, zooming can mess up width calculations, and the text can't be styled freely.</li> </ul> <p>Things that look promising but are not quite there:</p> <ul> <li><strong>word-wrap : break-word</strong> - it's now <a href="http://www.w3.org/TR/css3-text/#word-wrap" rel="noreferrer">part of CSS3 working draft</a>, but it's not supported by either Firefox, Opera or Safari yet. This would be the ideal solution if it worked across all browsers today :(</li> <li><strong>injecting <wbr> tags into the string</strong> via js/ server-side - copying and pasting URLs works in all browsers, but I still don't have a good way of measuring where to put the breaks. Also, this tag invalidates HTML.</li> <li><strong>adding breaks after every character</strong> - it's better than thousands of DOM insertions, but still not ideal (adding DOM elements to a document eats memory and slows downs selector queries, among other things).</li> </ul> <p>Does anyone have more ideas on how to tackle this problem?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload