cristinafsanz
10/11/2019 - 7:58 AM

Truncate text more than 2 lines (ellipsis)

truncate-text-2-lines-scss
content_copyfile_download
@mixin truncate-two-lines($lineheight) {
  /* Truncate if more than 2 lines */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;

  /* number of lines to show */
  -webkit-line-clamp: 2;

  /* fallback */
  line-height: $lineheight rem;
  max-height: $lineheight*2 rem;
}
page.scss
content_copyfile_download
.title {
  @include truncate-two-lines(2);
}
ellipsis-multiline.md
content_copyfile_download
  • Rendered
  • Source
<article class="card">
  <p>If everything could ever be this real forever.
    If anything could ever be this good again.
    The only thing I'll ever ask of you.
    You've got to promise not to stop when I say when
    she sang</p>
</article>

body {
  font-family: sans-serif;
  display: grid;
  min-height: 100vh;
  place-content: center;
}

.card {
  border: 2px solid;
  padding: 2em;
  width: 200px;

  p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
}