CODEWITHSUNDEEP
htmlcssfirefox
Star_Man
Star_Man

Reputation: 1091

Multiline text ellipsis in Firefox browser

I found how to make multiline text ellipsis by using css3.

Here is the link I found. http://codepen.io/martinwolf/pen/qlFdp

In chrome browser, it is right, but in firefox browser, it is wrong.

How to make ellipsis of multi-line text in Firefox browser by using css3?

IMPORTANT This question is how to process multi-line text in Firefox using only css3...

Upvotes: 2

Views: 8562

Answers (3)

Nikit Barochiya
Nikit Barochiya

Reputation: 1091

Multiline text ellipsis in 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>

Upvotes: 1

Nikit Barochiya
Nikit Barochiya

Reputation: 1091

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>

Upvotes: 0

Zmogas
Zmogas

Reputation: 1165

I will share what I have found: http://revelry.co/multi-line-ellipsis-using-pure-css/

But it is somewhat buggy and have to define background color. Transparent does not help. In :before I can use transparent, but :after has to define exact color.

So, my final CSS is:

.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;
    }
  }

Upvotes: 1

Related Questions