From 388a637f866f6d9bf7b002a031103fb12812d865 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Atiba=20Dee=20=F0=9F=92=A5?= Date: Wed, 2 Sep 2026 07:37:25 +0500 Subject: [PATCH 1/2] feat: add line-clamp utility for multi-line text truncation --- scss/_helpers.scss | 1 + scss/_mixins.scss | 1 + scss/helpers/_line-clamp.scss | 9 +++++++++ scss/mixins/_line-clamp.scss | 7 +++++++ 4 files changed, 18 insertions(+) create mode 100644 scss/helpers/_line-clamp.scss create mode 100644 scss/mixins/_line-clamp.scss diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 13f2752c9bcc..4d9f2562db08 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -10,3 +10,4 @@ @import "helpers/stretched-link"; @import "helpers/text-truncation"; @import "helpers/vr"; +@import "helpers/line-clamp"; \ No newline at end of file diff --git a/scss/_mixins.scss b/scss/_mixins.scss index e1e130b16438..c3de778a03b3 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -17,6 +17,7 @@ @import "mixins/visually-hidden"; @import "mixins/reset-text"; @import "mixins/text-truncate"; +@import "mixins/line-clamp"; // Utilities @import "mixins/utilities"; diff --git a/scss/helpers/_line-clamp.scss b/scss/helpers/_line-clamp.scss new file mode 100644 index 000000000000..742e3ba138aa --- /dev/null +++ b/scss/helpers/_line-clamp.scss @@ -0,0 +1,9 @@ +// +// Line clamp +// + +@each $n in (1, 2, 3, 4, 5) { + .line-clamp-#{$n} { + @include line-clamp($n); + } +} \ No newline at end of file diff --git a/scss/mixins/_line-clamp.scss b/scss/mixins/_line-clamp.scss new file mode 100644 index 000000000000..178c3b17bb1f --- /dev/null +++ b/scss/mixins/_line-clamp.scss @@ -0,0 +1,7 @@ +// Line clamp +@mixin line-clamp($lines: 2) { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: $lines; + overflow: hidden; +} \ No newline at end of file From e9d31767b493d0e6058c9838b262c18fa9572fc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Atiba=20Dee=20=F0=9F=92=A5?= Date: Wed, 2 Sep 2026 07:43:44 +0500 Subject: [PATCH 2/2] fix: resolve stylelint issues in line-clamp utility --- scss/_helpers.scss | 2 +- scss/helpers/_line-clamp.scss | 2 +- scss/mixins/_line-clamp.scss | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 4d9f2562db08..898087f22b74 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -10,4 +10,4 @@ @import "helpers/stretched-link"; @import "helpers/text-truncation"; @import "helpers/vr"; -@import "helpers/line-clamp"; \ No newline at end of file +@import "helpers/line-clamp"; diff --git a/scss/helpers/_line-clamp.scss b/scss/helpers/_line-clamp.scss index 742e3ba138aa..016f0811daa7 100644 --- a/scss/helpers/_line-clamp.scss +++ b/scss/helpers/_line-clamp.scss @@ -6,4 +6,4 @@ .line-clamp-#{$n} { @include line-clamp($n); } -} \ No newline at end of file +} diff --git a/scss/mixins/_line-clamp.scss b/scss/mixins/_line-clamp.scss index 178c3b17bb1f..022db551ab21 100644 --- a/scss/mixins/_line-clamp.scss +++ b/scss/mixins/_line-clamp.scss @@ -1,7 +1,7 @@ // Line clamp @mixin line-clamp($lines: 2) { display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: $lines; overflow: hidden; -} \ No newline at end of file + -webkit-line-clamp: $lines; + -webkit-box-orient: vertical; +}