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

标签 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/

由于某些原因,文本长度的结果因浏览器而异。 我想知道这怎么可能,我该如何解决?

Chrome : enter image description here

火狐: enter image description here

最佳答案

Firefox 不支持 line-clamp,这就是您只能看到一行文本的原因。

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

关于html - 不同浏览器上的文本溢出较少,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40360427/

相关文章:

javascript - 访问 var 外部函数

javascript - 在 "area-tag"上结合 jquery 和 css

html - CSS 清晰的理解

jquery - 如何获得溢出:auto property set in css的div的高度

css - Html CSS 按钮在 Firefox 中看起来不同

html - 滚动时如何在导航栏中使用纯CSS更改图像?

html - 火狐 : Transition placeholder opacity

html - 使用 HTML Agility 剥离 HTML 标签但保留内部文本?

javascript - 如何更改窗口内内容的大小?

javascript - NVD3 图表无法计算 Chrome 中的图例文本长度,因为 Window.getComputedStyle 未正确返回字体大小