.textOverflowMulti(@line: 3, @bg: #fff) { overflow: hidden; position: relative; line-height: 1.5em; max-height: @line * 1.5em; text-align: justify; margin-right: -1em; padding-right: 1em; &:before { background: @bg; box-shadow: 2px 0 2px 1px rgba(255, 255, 255, 0.2); content: '...'; padding-left: 0; position: absolute; right: 14px; bottom: 0; } &:after { background: white; content: ''; margin-top: 0.2em; position: absolute; right: 14px; width: 1em; height: 1em; } } .ellipsis { display: inline-block; word-break: break-all; } .lines { position: relative; .shadow { color: transparent; opacity: 0; display: block; position: absolute; top: 0; left: 0; width: 9999px; z-index: -999; } } .linesCover { .textOverflowMulti(); display: block; }