Multiline text wrapping using css (webkit only)

multiline-text-wrap

#parent-element {
/* Breaking this into main wrapper and truncate
    allows you to have content that you actually
    truncate and some other that you don't */

  .main-wrapper {
    height: 160px;
  }
  
  .truncate {
    p {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100px; /*the max-width can be inehrited from other elements, not being necessary to be here*/
    }
  }
}

#parent-element
  .main-wrapper
    .some-nice-class
      %p
        %span this is some text
        %span some more text that we need to show
      .truncate
        %p and this is the text that we want to truncate with multiple lines