Neatly truncating text to fit a physical dimension

[Geoff Soper]

Does anyone know of a way of neatly truncate a line of text at a given
physical point, i.e. a width specified in pixels. By neatly I mean not
by simply using the overflow CSS property but to truncate the text on
a word boundary and maybe add a '...' or 'cont.'

Many thanks,
Geoff

[Fabian]

Re: Neatly truncating text to fit a physical dimension

Geoff Soper hu kiteb:
[color=blue]
> Does anyone know of a way of neatly truncate a line of text at a given
> physical point, i.e. a width specified in pixels. By neatly I mean not
> by simply using the overflow CSS property but to truncate the text on
> a word boundary and maybe add a '...' or 'cont.'[/color]

I don't think this is possible. aiui, this would require that javascript
be able to detect the properties of the font, as well as the size it has
been instructed to display it at, and I think knowing both of those is
beyond javascript.


--
--
Fabian
Visit my website often and for long periods!

http://www.lajzar.co.uk

[Lasse Reichstein Nielsen]

Re: Neatly truncating text to fit a physical dimension

"Fabian" <lajzar@hotmail .com> writes:
[color=blue]
> I don't think this is possible. aiui, this would require that javascript
> be able to detect the properties of the font, as well as the size it has
> been instructed to display it at, and I think knowing both of those is
> beyond javascript.[/color]

Actually ... (entering unpractical mode)

You *could* start out with a long text in a div, set to not break, and
then keep shortening it and looking at its actual width until it is
shorter than the width you want to assign it to.

It won't be pretty, and I don't think I'd recommend it for anything
practical, but ... just for geeky completeness :)

---
<script type="text/javascript">
function cutToFit(elem) { // elem contains only text
var str = elem.firstChild .nodeValue;
var i = str.length;
while(elem.offs etWidth > elem.parentNode .offsetWidth) {
i--;
var newstr = str.substring(0 ,i)+"...";
elem.firstChild .nodeValue = newstr;
}
}
</script>
<div style="white-space:nowrap;ov erflow:visible; ">
<span id="foo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</span>
</div>
<script type="text/javascript">
cutToFit(docume nt.getElementBy Id("foo"));
</script>
---
Works in Mozilla and Opera 7, not in IE 6 for some reason.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'