CSS to trim overly long node titles

Motivated by the length of the recent title "Why are other popular languages very different from Perl when installing libraries, e.g. no testing needed and no compilation of C/C++ code done" I did some experimenting and came up with the following CSS which cuts off long node titles at a predefined width in the Recent Threads view (my issue here is that with titles wrapping, the layout looks somewhat "messed up" (for my taste), which makes it unnecessarily hard to tell signal from noise...).

a.nnt-link {
  max-width: 50em;
  display: block;
  float: left;
  margin-right: 5px;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; 
}
[download]

The float:left kind of "undoes" the display:block, which is only required because max-width wouldn't work with "inline"-layouted elements. The text-overflow: ellipsis - which is supposed to put "..." at the end to indicate the text has been cut off - doesn't seem to work with Firefox, but IIRC it should work with some other browsers (can't test at the moment).

The hack has the "works for me" status, which means I haven't tested it with any other browsers/themes/window widths etc. than what matters for me (using FF / the "Perl-Blue" theme). In other words, it might not work for you.

Anyhow, just wanted to share it as a starting point for others — just in case I'm not the only one feeling mildly annoyed by people putting half of their node content in the title ;)

Improvements or alternatives welcome. Cheers

Comment on CSS to trim overly long node titles Select or Download Code

Replies are listed 'Best First'.
Re: CSS to trim overly long node titles by steve (Deacon) on Apr 07, 2011 at 19:27 UTC
Quirksmode describes text-overflow support as follows: Supported by IE7-, Safari and Konqueror. Opera needs -o-text-overflow. This might be because css3 is not complete yet.	[reply]
Re: CSS to trim overly long node titles by luis.roca (Deacon) on Apr 07, 2011 at 14:35 UTC
Nice idea. Thanks alot for putting this up Eliya. :) I'm not sure where you found the `a.nnt-link` style but unfortunately it didn't work for me. I looked at the CSS and found `h3.other` `h3.other { max-width: 30em; display: block; margin-right: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } p a { max-width: 50em; display: block; float: left; margin-right: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }` [download] This works - ok - right now. (Though also in the "works for me" stage) Adjust the `max-width` to your taste. I don't find this to be a too much of a recurring problem IMO but it's definitely a nice option to have for stretches when PM node titles trend long. Again, thank you Eliya for bringing it up and providing a solution all at once. ++ Luis UPDATE: added the `p a` style. "...the adversities born of well-placed thoughts should be considered mercies rather than misfortunes." — Don Quixote	[reply] [d/l] [select]
Re^2: CSS to trim overly long node titles by Eliya (Vicar) on Apr 07, 2011 at 15:10 UTC
I'm not sure where you found the a.nnt-link style I looked at the page source :) `a.nnt-link` is a selector for `<a>` tags with the `class` attribute value `"nnt-link"` (set by PM) — which is what my attempts focused on. For example, the respective link in RAT view pointing to your reply (currently) looks like this: `<a class="nnt-link nnt-Steaming" href="?node_id=898077" title="Created + at 2011-04-07 16:35 (2 minutes ago)">Re: CSS to trim overly long nod +e titles</a>` [download]	[reply] [d/l] [select]
Re^3: CSS to trim overly long node titles by luis.roca (Deacon) on Apr 07, 2011 at 15:44 UTC
I looked at the page source :) Oh yeah that! :-D Not sure why but I don't see it on any of the style sheets. The `p a` style was the closest I got to what you did but that ends up getting a little messy with the `float: left;` on other links. "...the adversities born of well-placed thoughts should be considered mercies rather than misfortunes." — Don Quixote	[reply] [d/l] [select]


Perl: the Markov chain saw
	PerlMonks