html - Firefox 浏览器中的多行文本省略号

Question

我找到了如何使用 css3 制作多行文本省略号。

这是我找到的链接。 http://codepen.io/martinwolf/pen/qlFdp

在chrome浏览器中是正确的，在firefox浏览器中是错误的。

如何使用css3在Firefox浏览器中制作多行文本的省略号？

重要这个问题是如何使用 only css3 处理 Firefox 中的多行文本...

Answer 1

我将分享我的发现: http://revelry.co/multi-line-ellipsis-using-pure-css/

但它有点问题，必须定义背景颜色。透明没有帮助。在 :before 中我可以使用透明，但是 :after 必须定义准确的颜色。

所以，我最终的 CSS 是:

.text-truncate {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 280px;
  max-height: 72px;
  margin: 0 auto;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;   /* required for Opera */
  -ms-text-overflow: ellipsis;  /* required for IE8, allegedly */
  /* Firefox solution: */
  @-moz-document url-prefix() {
    overflow: hidden;
    position: relative;
    &:before {
      background: transparent;
      bottom: 0;
      position: absolute;
      right: 0;
      float: right;
      content: '\2026';
      margin-left: -3rem;
      width: 3rem;
    }
    &:after {
      content: '';
      background: #fcfcfc;
      position: absolute;
      height: 50px;
      width: 100%;
      z-index: 1;
    }
  }