Tag truncation

[sarken]

A couple weeks ago, I was playing around with skins and came up with a way to truncate the text of longer freeform tags. Basically, stick this CSS in a site skin and it'll turn "This is my very very very very long freeform tag" into "This is my very very very ver..."

.blurb ul.tags li.freeforms { display: inline-block; overflow: hidden; max-width: 15em; text-overflow: ellipsis; white-space: nowrap; }

You can change max-width: 15em to a smaller number if your personal definition of long is different. This only applies to freeform tags in the blurbs, so there's no need to worry about long character names or relationships getting cut off, and you can still see the full tag on the work itself. If you want to truncate it there as well, change .blurb ul.tags li.freeforms to .blurb ul.tags li.freeforms, .meta dd.freeform li

ETA: Updated to work in Chrome in addition to Opera, Firefox, and Safari.

Comments

[hl]

Have I told you lately that I love you? Er, I mean, this is awesome. And I've just realized this is what you posted in the debate of doom. /hadn't read the code there

[flamebyrd]

Awesome! And you taught me a new CSS3 trick (I really haven't researched the new features enough...)