I have a width limited box on a website that contains text. Normally the text will break across several lines as expect just fine. However, every now and then there is a really long word that breaks out of the box:
|--------------------------|
| Some would say that |
| the word |
| antidisestablishmentarianism
| is entirely too long. |
|--------------------------|
Since I can’t allow the width of the box to be variable, I would like to detect this so that I can take appropriate action (such as inserting a hyphen, or making the font size smaller, or replacing a really long URL with bit.ly, etc.). How would I do this?
<wbr> won’t add a hyphen though. The soft hyphen, ­, is more appropriate for this I think. It’s supported by all major browsers (with Firefox, only FF3.0 and newer). So unless you can’t FF2 and older, I’d go with ­.
I usually do when I’m able to track down a source. In this case I was either lazy or unable. I have no problem making the edit.
I will have to disagree with you though on one front. My css is not a carbon copy of his. His is a ten minute read and intermixed with every other css/html on that page. Mine is a zero minute read and shown in 10 lines of code demos. And NO, he has no pure CSS version (slightly flawed as may be).
When you follow his article through points 1, 2 and 3, that is all pure CSS/HTML
It’s only when you carry on to point 4 of his article that he introduces the XML addition for Firefox, and updates the CSS code accordingly.
I do agree that your page does simplify everything to just the code involved. I suspect though that I wouldn’t have learned as much about the problem if I only had the code by itself, and it would be a lot more difficult to find the code-only solution when searching via google, but that then has to be put down to a difference of opinion.
That’s how I learn best - by looking at (and playing with) the code. I usually don’t have the patients to read through it all the explanation. I retract the retraction of my compliment - that was immature on my part. I just don’t respond to well to that kind of implication. Thank you for bringing the source to my attention, because I do prefer to include the original source when applicable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#pre-wrap {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
width:250px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="pre-wrap">
Some would say that
the word
antidisestablishmentarianismhasdfhaksjdfhlaksjdfhalskjdfhasdf
is entirely too long.
</div>
</body>
</html>
Thanks everyone for the very helpful pointers! Raffles was right, I can’t just hide part of the content but using a combination of the wbr, , and shortlinks.js suggestions I was able to get what I needed.