0

I am using multiline truncation sass mixin. It doesnot show '...' in chrome. While debugging I got -webkit-box-orient: vertical; is not getting applied.

Below is the code:

 overflow: hidden;
  max-height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */

  display: -webkit-box;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;

  // Solution for Opera
  text-overflow: -o-ellipsis-lastline;

  font-size: $font-size;
  line-height: $line-height;
  text-overflow: ellipsis;

Thanks in advance for help

mahil
  • 33
  • 10

1 Answers1

0

You can find a solution in this post:

http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white){
  overflow: hidden;
  position: relative;
  line-height: $lineHeight;
  max-height: $lineHeight * $lineCount; 
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  &:before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
  }
  &:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: $bgColor;
  }
}

there is a sample in codepen where you can see the results:

http://codepen.io/natonischuk/pen/QbGWBa

Dailos Medina
  • 161
  • 1
  • 6
  • this works fine. but if we don't want to justify text, it creates an empty space. Is there any way '...' remains stick to last word which appears in third row (linecount- let say its 3) – mahil Feb 08 '17 at 14:26
  • I think you will need to do some javascripting to detect the latest visible word in the block. I don't think this is possible with css at the moment. – Dailos Medina Feb 13 '17 at 11:39