diff --git a/projects/demo/src/modules/components/line-clamp/examples/6/index.html b/projects/demo/src/modules/components/line-clamp/examples/6/index.html
new file mode 100644
index 000000000000..c2f833c6a24f
--- /dev/null
+++ b/projects/demo/src/modules/components/line-clamp/examples/6/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
diff --git a/projects/demo/src/modules/components/line-clamp/examples/6/index.less b/projects/demo/src/modules/components/line-clamp/examples/6/index.less
new file mode 100644
index 000000000000..1a3031d5df86
--- /dev/null
+++ b/projects/demo/src/modules/components/line-clamp/examples/6/index.less
@@ -0,0 +1,7 @@
+.huge {
+ line-height: 40px;
+}
+
+.small {
+ line-height: 20px;
+}
diff --git a/projects/demo/src/modules/components/line-clamp/examples/6/index.ts b/projects/demo/src/modules/components/line-clamp/examples/6/index.ts
new file mode 100644
index 000000000000..bc9f6ec9279a
--- /dev/null
+++ b/projects/demo/src/modules/components/line-clamp/examples/6/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+ selector: 'tui-line-clamp-example-6',
+ templateUrl: './index.html',
+ styleUrls: ['./index.less'],
+ encapsulation,
+ changeDetection,
+})
+export class TuiLineClampExample6 {}
diff --git a/projects/demo/src/modules/components/line-clamp/line-clamp.component.ts b/projects/demo/src/modules/components/line-clamp/line-clamp.component.ts
index 4b2c10170cdf..cb821f4efd54 100644
--- a/projects/demo/src/modules/components/line-clamp/line-clamp.component.ts
+++ b/projects/demo/src/modules/components/line-clamp/line-clamp.component.ts
@@ -46,4 +46,10 @@ export class ExampleTuiLineClampComponent {
HTML: import('./examples/5/index.html?raw'),
LESS: import('./examples/5/index.less?raw'),
};
+
+ readonly example6: TuiDocExample = {
+ TypeScript: import('./examples/6/index.ts?raw'),
+ HTML: import('./examples/6/index.html?raw'),
+ LESS: import('./examples/6/index.less?raw'),
+ };
}
diff --git a/projects/demo/src/modules/components/line-clamp/line-clamp.module.ts b/projects/demo/src/modules/components/line-clamp/line-clamp.module.ts
index 5b2bfd03dc5b..cc00d51accf4 100644
--- a/projects/demo/src/modules/components/line-clamp/line-clamp.module.ts
+++ b/projects/demo/src/modules/components/line-clamp/line-clamp.module.ts
@@ -23,6 +23,7 @@ import {TuiLineClampExample2} from './examples/2';
import {TuiLineClampExample3} from './examples/3';
import {TuiLineClampExample4} from './examples/4';
import {TuiLineClampExample5} from './examples/5';
+import {TuiLineClampExample6} from './examples/6';
import {ExampleTuiLineClampComponent} from './line-clamp.component';
@NgModule({
@@ -49,6 +50,7 @@ import {ExampleTuiLineClampComponent} from './line-clamp.component';
TuiLineClampExample3,
TuiLineClampExample4,
TuiLineClampExample5,
+ TuiLineClampExample6,
],
exports: [ExampleTuiLineClampComponent],
})
diff --git a/projects/demo/src/modules/components/line-clamp/line-clamp.template.html b/projects/demo/src/modules/components/line-clamp/line-clamp.template.html
index 7bf3dd8d449e..3e675bb1b946 100644
--- a/projects/demo/src/modules/components/line-clamp/line-clamp.template.html
+++ b/projects/demo/src/modules/components/line-clamp/line-clamp.template.html
@@ -45,6 +45,14 @@
>
+
+
+
+
diff --git a/projects/kit/components/line-clamp/line-clamp.component.ts b/projects/kit/components/line-clamp/line-clamp.component.ts
index 9e04d1bb908f..7b466423f20a 100644
--- a/projects/kit/components/line-clamp/line-clamp.component.ts
+++ b/projects/kit/components/line-clamp/line-clamp.component.ts
@@ -13,6 +13,7 @@ import {
Renderer2,
ViewChild,
} from '@angular/core';
+import {WINDOW} from '@ng-web-apis/common';
import {tuiIsCurrentTarget, tuiPx, tuiTypedFromEvent, tuiZonefree} from '@taiga-ui/cdk';
import {TUI_HINT_COMPONENT, TuiHintDirective} from '@taiga-ui/core';
import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
@@ -55,7 +56,7 @@ export class TuiLineClampComponent implements DoCheck, AfterViewInit {
}
@Input()
- lineHeight = 24;
+ lineHeight: number | 'auto' = 24;
@Input()
content: PolymorpheusContent;
@@ -82,6 +83,7 @@ export class TuiLineClampComponent implements DoCheck, AfterViewInit {
@Inject(Renderer2) private readonly renderer: Renderer2,
@Inject(ChangeDetectorRef) private readonly cd: ChangeDetectorRef,
@Inject(NgZone) private readonly zone: NgZone,
+ @Inject(WINDOW) private readonly window: Window,
@Inject(TUI_LINE_CLAMP_OPTIONS) private readonly options: TuiLineClampOptions,
) {
this.skipInitialTransition();
@@ -103,6 +105,19 @@ export class TuiLineClampComponent implements DoCheck, AfterViewInit {
return this.options.showHint && this.overflown ? this.content : '';
}
+ private get computedLineHeight(): number {
+ if (this.lineHeight === 'auto') {
+ return (
+ parseInt(
+ this.window.getComputedStyle(this.el.nativeElement).lineHeight,
+ 10,
+ ) || 24
+ );
+ }
+
+ return this.lineHeight;
+ }
+
@HostListener('transitionend')
updateView(): void {
this.cd.detectChanges();
@@ -139,7 +154,7 @@ export class TuiLineClampComponent implements DoCheck, AfterViewInit {
this.renderer.setStyle(
this.el.nativeElement,
'max-height',
- tuiPx(this.lineHeight * this.linesLimit$.value),
+ tuiPx(this.computedLineHeight * this.linesLimit$.value),
);
}
}