For those of you who have this blog in an RSS reader, here's a quick and simple CSS tip so it's not all bad news. I recently learned about a CSS property called text-overflow, which you can set to a value of ellipsis. When used in conjunction with a couple of other CSS properties, any text which is too long is truncated and "..." is appended to the end.
Example with an H1 element:
Really long long first-level header element that has a lot of text
Now, here's one that is styled with "text-overflow:hidden;":
Really long long first-level header element that has a lot of text
Here is the list of styles being applied to the latter that make this possible:
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow:hidden;
Seems very underutilized on the web, as I often see text wrapping on a page where the designer clearly never expected there to be a lot of text. And definitely useful if you're doing HTML5 for a mobile browser, where available space is even more constrained.