Text overflow less on different browsers

Question

I have this html and css:

<div>

  Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet
  consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt
  ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet
  consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt
  ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit am Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet
  consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt
  ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit am Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet
  consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt
  ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit am Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet
  consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt
  ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit am Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet
  consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt
  ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit am consectetur adipiscing
  elit sed do eiusmod tempor incididunt ut labore.

</div>

div {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
     -ms-box-orient: vertical;
    display:-webkit-box;
    display:-moz-box;
      display:-ms-box;
    -webkit-line-clamp: 2;
     -moz-line-clamp: 2;
      -ms-line-clamp: 2;
    font-size: 20px;
    text-shadow: 1px 1px 3px #000000, -1px -1px 3px #000000;
}

The outcome can be seen here: https://jsfiddle.net/8j1qb3o9/1/

For some reason the outcome of the text length is different per browser. I was wondering how this is possible, and how do i solve it?

Chrome:

Firefox:

Not a answer but you should give that div a class and style that instead, instead of styling the whole div element. To give a wild guess on this problem though, you could see if anything changes by giving a width attribute to it. — Xariez, Nov 01 '16 at 12:52

score 1 · Accepted Answer · answered Nov 01 '16 at 12:53

1

Firefox does not support line-clamp, which is why you only see one line of text.

http://caniuse.com/#search=line-clamp

answered Nov 01 '16 at 12:53

Elise

5,086
4
36
51

Aah, makes sense. Is there some kind of workaround to so i get the same amount of text on every browser? – Kevin Nov 01 '16 at 12:54
You could either settle with having a single line of text for all browsers (`text-overflow` in combination with `white-space: nowrap` is pretty much universally supported), or you could trim the text with javascript. See http://stackoverflow.com/questions/1199352/smart-way-to-shorten-long-strings-with-javascript or http://dotdotdot.frebsite.nl/ – Elise Nov 01 '16 at 15:01

score -1 · Answer 2 · answered Nov 01 '16 at 13:02

-1

Add white-space: nowrap to your div

answered Nov 01 '16 at 13:02

O_Z

1,515
9
11

1

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/low-quality-posts/14157478) – Deepak Mahakale Nov 02 '16 at 06:06
@Deepak This solves to problem he has. He asked "how to I solve it ? ".your comment is not in place. – O_Z Nov 02 '16 at 16:43
1

In that case please add more description to the answer – Deepak Mahakale Nov 02 '16 at 17:14

Text overflow less on different browsers

2 Answers2

Linked