Detecting text overflow

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?

I would ask in the css forum. I’m pretty sure there’s a way to tell a browser to just break a long word.

There are also CSS ways to hide the extra that overflows, and even automatically apply the … characters.

Use the <wbr> element.

Here is every way imaginable (by me anyways) http://www.visibilityinherit.com/code/wrap-text.php

<wbr> won’t add a hyphen though. The soft hyphen, &shy;, 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 &shy;­.

Here’s another, where CSS is used to automatically truncate the excess using …

http://mattsnider.com/css/css-string-truncation-with-ellipsis/

Hey pmw57, your a JavaScript stud!

Oh yeah, did forget to add that. I even have that demo. A pure css version too. http://www.visibilityinherit.com/code/ellipsis.php

Yep, that seems to be the same CSS-only one as at http://mattsnider.com/css/css-string-truncation-with-ellipsis/

Oi, hey!! visibilityinherit.com has no source, or attributions.

The code at visibilityinherit.com appears to be a direct copy of the mattsnider.com one. Justin Maxwell from mint.com guest-wrote the article on mattsnider.com

pmw57, I retract my compliment.

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.

You’re welcome, and thank you for handling this with good grace.

isn’t pre-wrap what you are after?


<!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>

Ummm,

overflow:hidden;

Umm, that’s just going to hide the overflowing super-long word, not break it into chunks. That’s not what the OP is after.

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.