converts any text into a single line with a fade out on the right side

fade-text-to-right

@mixin text-overflow-fade($background-color: #fff, $text-width: 100%, $fade-size: 30%) {

    width: $text-width;
    overflow: hidden;
    white-space: nowrap;
    position: relative;

    &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: $fade-size;
        height: 100%;
        @include background-image(linear-gradient(left, rgba(255,255,255,0) 0%, $background-color 80%, $background-color 100%));
        pointer-events: none;
    }
}