This is as days pass by, by Stuart Langridge

And this is Truncated text, written , and concerning JavaScript and the DOM

A minor little web experiment: truncated text. Resize the window and it wraps the text in a div so that only the first line shows.

Comments

mrben

Erm - it doesn't work until you refresh the window (in FF at least). If you resize then the boxes get bigger, but then if you hit Refresh they go back to 1 line.

sil

mrben: WFM in both Linux and Windows FF?

resiak

WFM in Galeon.

last.fm do something similar in their lists: see http://www.last.fm/user/wjt , for instance. They appear to use tables (ick!), but it might be worth studying that.

Jepp

resiak: I believe in this case it would make sense for those tables to, well, use table tags.

sil

jepp: agreed.

resiak: their technique doesn't rely on tableness, and it's pure CSS. Neat, and I've linked it from the truncated-text article; it relies on you being prepared to specify the line height, though.

Patrick Fitzgerald

Cool stuff! How about adding a control to "untruncate" the text? I developed an interesting method to do so: http://barelyfitz.com/projects/truncate/

Richard Rutter

Nice one. But to finish it off you really need an ellipsis at the end of the truncated text.

DG

It seems to make resizing the browser (in my case Mozilla 1.7.12) slow and somewhat jerky. The extra text doesn't appear straight away either.

DG

Marko

I can confirm mrben's problem in FF1.0 on Mac.

This website belongs to Stuart Langridge. Contact details are available. Don't eat yellow snow. Valid HTML5, at least in theory, except for the bits that aren't because I'm that futuristic that I'm ahead of the spec, oh yes. HTML5 help from Bruce Lawson, among others. Fonts from the superb FontSquirrel. End.