Skip to content

Instantly share code, notes, and snippets.

@zandroid

zandroid/multiline-ellipsis.scss

Last active November 12, 2019 09:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zandroid/2b4d8f2b2aef4aba7c80 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zandroid/2b4d8f2b2aef4aba7c80 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Andrey Zaytsev revised this gist Aug 4, 2015. No changes.
  2. Andrey Zaytsev revised this gist Aug 4, 2015. No changes.
  3. Andrey Zaytsev created this gist Aug 4, 2015.
    46 changes: 46 additions & 0 deletions multiline-ellipsis.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    @mixin multiline-ellipsis(
    $lines,
    $lineHeight: 1.4,
    $ellipsisWidth: 3em,
    $bgColor: white
    ) {
    box-sizing: content-box;
    overflow: hidden;
    height: $lines * $lineHeight * 1em;
    line-height: $lineHeight;

    &:before {
    content:"";
    float: left;
    width: 5px;
    height: $lines * $lineHeight * 1em;
    }

    & > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }

    &:after {
    content: "\02026";

    float: right;
    position: relative;
    top: -$lineHeight * 1em;
    left: 100%;
    box-sizing: content-box !important;
    width: $ellipsisWidth;
    margin-left: -$ellipsisWidth;
    padding-right: 5px;

    text-align: right;
    background: white;
    background: -webkit-gradient(linear, left top, right top,
    from(rgba(255, 255, 255, 0)), to($bgColor), color-stop(50%, $bgColor));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), $bgColor 50%, $bgColor);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), $bgColor 50%, $bgColor);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), $bgColor 50%, $bgColor);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), $bgColor 50%, $bgColor)
    }

    }
    3 changes: 3 additions & 0 deletions sample.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    .box-2lines-ellipsis {
    @include multiline-ellipsis(2);
    }