4

So about to lose my marbles over this one..

My Problem: I need to have text within a unordered list that vertically aligns baseline, but also does something like (text-overflow:ellipsis) ONLY after one line wrap .

What I'm coming to a conclusion on is this CAN NOT only be done with CSS, (if it can please show me!)

Here's a fiddle if it helps! http://jsfiddle.net/5NVze/

Also a image of what I'm trying to accomplish... http://img535.imageshack.us/img535/2307/exampleps.jpg

Starboy
  • 1,635
  • 3
  • 19
  • 27
  • 1
    I can't think of a CSS-only solution either. Even if you fixed cells to be 2 lines high, cells that do NOT wrap would have too much ugly empty space. – Greg Pettit Nov 11 '11 at 16:17
  • 1
    Even if you do fix them to be 2 lines high, the text-overflow will no longer work. It just clips off without the ellipsis. It requires the white-space to be set to nowrap, unfortunately. – Nate B Nov 11 '11 at 16:20
  • @Nate B, sadly that's what I'm coming to a conclusion on myself – Starboy Nov 11 '11 at 16:28
  • Yea, I played around and tried some different cases with fixed height, max-height, etc. but nothing worked. – Nate B Nov 11 '11 at 16:34
  • @Nate B, I got it! (With JavaScript) http://jsfiddle.net/5NVze/5/ – Starboy Nov 11 '11 at 16:42

1 Answers1

2

So solution is you CAN NOT accomplish this with just css!

Here is a simple example with Mootools/CSS http://jsfiddle.net/5NVze/5/

Starboy
  • 1,635
  • 3
  • 19
  • 27
  • This solution is kind of a cop-out. Instead of forcing it to two lines of text, you're forcing it to 18 characters in length -- in many scenarios this gives unacceptable results. Even in your own scenarios it's not behaving that great, as more content could fit in a few of the boxes... – BrainSlugs83 Jun 23 '12 at 00:01