body { width: 100%; min-height: 100vh; padding-bottom: 150px; background-image: linear-gradient(45deg, #F7CAC9 15%, #91A8D0 85%); font-feature-settings: "pwid"; } p { margin-bottom: 0; } .h1 { margin: 1.4em; font-family: 'Dancing Script', cursive; color: rgba(white, .85); } .wrap { display: flex; justify-content: center; align-items: center; } .inner { min-width: 300px; } .text { margin: 2em; padding: 2em; max-width: 640px; font-size: 16px; text-align: justify; color: rgba(black,.65); font-weight: 600; border: 4px solid currentcolor; background-color: #ffffff; } @mixin lineClip($line-number: 2, $line-height: 1, $right-space: 1em, $background-color: #ffffff) { position: relative; overflow: hidden; height: calc(#{$line-number + em } * #{$line-height}); padding-right: $right-space; line-height: $line-height; background-color: $background-color; &:before { content: "..."; position: absolute; right: 0; bottom: 0; display: inline-block; width: $right-space; } &:after { content: ""; position: relative; right: calc(#{$right-space} * -1); float: right; width: $right-space; height: 100%; margin-left:calc(#{$right-space} * -1); background-color: $background-color; } } .one { // lineClip(row, line-height, right-space, background-color(same parent)); @include lineClip(1); } .two { @include lineClip(2, 2); } .four { @include lineClip(4, 2, 2em, #ffffff); }