3

I was wondering if the following structure is possible.

enter image description here

Here I have a div of fixed width and height (the outer box). I made it to have fixed width and height because it's a list item and I want them to be uniform. Now, I'm having a problem with the Description area. I want it to have text that will wrap into multiple lines, and if it doesn't fit, it would show an ellipses. Now I'm planning to set the font-size and line-height strictly as to maybe show 2 lines of text in the Description div. Is this correct? I'm worried that the rendering will be messed up on some browsers and the design might be very fragile. I'm also a bit unsure on how to implement the ellipses using CSS-only solution. I've tried the text-overflow: ellipsis but couldn't quite get it to work.

To be honest, I'm still not sure if I'm on the right path. I'm thinking there might already be an existing/better solution for this structure. Is anyone else doing this? Any help would be very much appreciated. Thanks.

Here's the JsFiddle link:

http://jsfiddle.net/3kJWQ/4/

gerky
  • 6,267
  • 11
  • 55
  • 82
  • Can you post a jsFiddle of what you have so far? I think some of us could definitely help, but don't want to recreate your layout from scratch to test. – KP. Aug 10 '12 at 18:19
  • Oh..right, I've updated the question to include the JsFiddle link. Hope it helps, thanks. – gerky Aug 10 '12 at 19:00
  • Possible duplicate: http://stackoverflow.com/questions/3404508/cross-browsers-mult-lines-text-overflow-with-ellipsis-appended-within-a-widthhe – snuffn Aug 11 '12 at 13:19

2 Answers2

1

This seems to work:

.description {
  height: 60px;
  font-size: 14px;
  line-height: 21px;
  overflow: hidden;
  border: 1px solid #000;
  text-overflow: ellipsis;
  white-space: nowrap;

}

From: http://deepubalan.com/blog/2010/11/27/text-overflow-css3-property-explained-pure-css-solution-to-get-ellipsis/

text-overflow: ellipsis comes into play only when:

  1. The box has overflow other than visible.
  2. The box has white-space: nowrap.
Mark Bubel
  • 375
  • 4
  • 15
0

I got the solution from this question:

Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?

I chose to use the plugin jQuery dotdotdot.

Community
  • 1
  • 1
gerky
  • 6,267
  • 11
  • 55
  • 82