Detecting line wrap and adding "..." to overflowed words

[Jason]

I have a div box with a border, and some padding left and right. It has
some text with different font sizes, and a few icons. I want to cut off
any overflow at the end of the line with "...", instead of the text
wrapping. What is the best way I can detect whether the line wrapped,
and how many characters to cut off at the end?

- Jason

[Phrogz]

Jason wrote:

I have a div box with a border, and some padding left and right. It has
some text with different font sizes, and a few icons. I want to cut off
any overflow at the end of the line with "...", instead of the text
wrapping. What is the best way I can detect whether the line wrapped,
and how many characters to cut off at the end?

You can't. (Assuming that you are takling about HTML. JavaScript is
used in more areas than just web browsers.)

You might be able to hack the effect with overflow:hidden and a
right-aligned overlaid textbox with a white background and contents of
"...", but that won't stick to glyph boundaries. (And, this is a topic
for an HTML or CSS newsgroup.)

[Jim Ley]

On 13 Oct 2006 10:39:54 -0700, "Phrogz" <ga***@refinery .comwrote:

>Jason wrote:

>I have a div box with a border, and some padding left and right. It has
some text with different font sizes, and a few icons. I want to cut off
any overflow at the end of the line with "...", instead of the text
wrapping. What is the best way I can detect whether the line wrapped,
and how many characters to cut off at the end?

You can't. (Assuming that you are takling about HTML. JavaScript is
used in more areas than just web browsers.)

Hmm, well you can... but not in a nice way on anything but IE (where
you don't need to as it supports the CSS to do it automatically)

(method is strip words until the scrollHeight of the overflow'd region
is low enough...)

Jim.

[nutso fasst]

"Jim Ley" <ji*@jibbering. comwrote in message
news:45******** *******@news.in dividual.net...

On 13 Oct 2006 10:39:54 -0700, "Phrogz" <ga***@refinery .comwrote:

Hmm, well you can... but not in a nice way on anything but IE (where
you don't need to as it supports the CSS to do it automatically)

Someday, perhaps. The text-overflow property is in CSS3 working draft.

(method is strip words until the scrollHeight of the overflow'd region
is low enough...)

Not sure that would be doable with text of different sizes plus inline
images.

A more complex approach would be to position the div relative, put the text
line into a p with position: absolute, width: auto, visibility: hidden.
Follow that with a second, empty p with height: 0.

A window.onload function would store the original line in case of window
resize, then call another function to trim the line (the trim function would
be called on div.resize also).

The empty p.clientWidth is maxwidth. In the trim function, if p.clientWidth

maxwidth, append a span with textNode of '…' (ellipse character),

then delete words/images from previous siblings until p.clientWidth <=
maxwidth. Then make p visible.

nf

[Jeremy]

Jason wrote:

I have a div box with a border, and some padding left and right. It has
some text with different font sizes, and a few icons. I want to cut off
any overflow at the end of the line with "...", instead of the text
wrapping. What is the best way I can detect whether the line wrapped,
and how many characters to cut off at the end?

- Jason

Hmmm. Interesting.

You can prevent the line from wrapping using the white-space: nowrap;
directive in CSS. Then hide the overflow using overflow: hidden.

You can make a CSS class that has an ellipsis background image aligned
to the right bottom, along with enough padding-right to make it look
nice. You'll have to contain each line in its own element in order for
this to be effective.

You can check each line (each of which must be in its own element
according to your design parameters) by appending a dummy <spanto the
line element and grabbing the <span>'s offsetLeft. If the offsetLeft of
the <spanis greater than the clientWidth of the line element, it's
overflowed.

If it's overflowed, apply the CSS class and you get a (non-selectable)
ellipsis.

Jeremy

[nutso fasst]

I wrote:

line into a p with position: absolute, width: auto, visibility: hidden.

Oops, forgot to mention white-space: nowrap.