3

I realize this question is essentially the same as another one (Wrap a text within only two lines inside div), however, none of the answers in that thread worked correctly for me.

My situation boils down to this: I have a DIV of fixed width and fixed height, but is a container for text of a variable length. If the length exceeds the first line, it should wrap to the second line; if the text exceeds the second line, it should be truncated with ellipses.

So far I'm using the following:

.name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 20px;
  line-height: 10px;
  width: 64px;
}

But, obviously that doesn't wrap; with a few changes I can get it to wrap to the second line, but then the ellipses are not applied when it wraps beyond that.

As far as the answers posted in the other thread, this one came the closest, but it applied the ellipses to both lines of text, not just the second.

Is there a way to do this using only CSS, or am I going to have to JavaScript to accomplish this?

Community
  • 1
  • 1
jszpila
  • 676
  • 9
  • 24

2 Answers2

1

It's a really good question, but I don't think there's a good answer. The link from cimmanon and the answer by bažmegakapa would probably be my choice, as solutions like using psuedo :after to add ... look pretty tacky. Even if you could find a solution it'll probably rely on using vendor prefixes, which would degrade the experience on lesser browsers. The jQuery option might not be ideal, but it should work cross platform.

Ian Clark
  • 9,237
  • 4
  • 32
  • 49
0

You have to fake it with a pseudo-element over text in bottom corner. text-overflow:ellipsis works on single line.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129