Question

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

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

在Chrome浏览器中，它是正确的，但在Firefox浏览器中，它是错误的。

如何使用ellipsis在multi-line text浏览器中Firefox css3生成？{/ p>

重要这个问题是如何使用仅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;
    }
  }

Answer 2

Firefox中的多行文字省略号

p {
  font-family: Arial;
  color: #234F5C;
}

p {
  background: #FFFFFF;
  display: block;
  display: -webkit-box;
  max-height: 5.07rem;
  font-size: 1rem;
  line-height: 1.3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
}
@-moz-document url-prefix() {
  p {
    overflow: hidden;
    position: relative;
  }
  p:before {
    background: #FFFFFF;
    bottom: 0;
    position: absolute;
    right: 0;
    float: right;
    content: '\2026';
    margin-left: -2rem;
    width: 2rem;
  }
  p:after {
    content: '';
    background: #FFFFFF;
    position: absolute;
    height: 50px;
    width: 100%;
    z-index: 1;
  }
}

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Answer 3

p{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  -moz-binding: url('ellipsis.xml#ellipsis');
  display: block;
}

<p>democritum, vel an veri aperiam eleifend. Ei quo liber contentiones, ei usu decore placerat, omnesque torquatos ad mel. Pro eu imperdiet consequat. Est prodesset adolescens et, cu duo solum veniam accumsan. Mea idque debitis eu. Est cu liber labores habemus, cu adipiscing reformidans has.</p>

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

3 个答案: