不同浏览器上的文本溢出较少

时间:2016-11-01 12:50:40

标签: html css

我有这个html和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;
}

结果可以在这里看到:https://jsfiddle.net/8j1qb3o9/1/

由于某种原因,每个浏览器的文本长度结果不同。 我想知道这是怎么可能的,我该如何解决?

铬: enter image description here

火狐: enter image description here

2 个答案:

答案 0 :(得分:1)

Firefox不支持线夹,这就是为什么你只看到一行文字。

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

答案 1 :(得分:-1)

white-space: nowrap添加到您的div