From 79c08ff36ab1f8181650cef5e8f7da97317e4157 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Tue, 8 Aug 2023 15:57:10 +0200 Subject: [PATCH] mixins: Add `line-clamp()` and `text-ellpsis()` --- asset/css/mixin/mixins.less | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/asset/css/mixin/mixins.less b/asset/css/mixin/mixins.less index 3f2f107d..ca30dd0f 100644 --- a/asset/css/mixin/mixins.less +++ b/asset/css/mixin/mixins.less @@ -18,3 +18,20 @@ -moz-box-shadow: @arguments; box-shadow: @arguments; } + +.line-clamp(@numOfLines: 2) when (@numOfLines > 1) { + display: -webkit-box; + -webkit-line-clamp: @numOfLines; + -webkit-box-orient: vertical; +} +.line-clamp(@numOfLines: 2) when (@numOfLines = "reset") { + display: revert; + -webkit-line-clamp: initial; + -webkit-box-orient: initial; +} + +.text-ellipsis() { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +}