Line Clamp

Hadkan teks kepada bilangan baris tertentu

Sintaks

visual="line-clamp:[value]"

Nilai

Nilai	CSS Output	Huraian
1	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1	Satu baris
2	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2	Dua baris
3	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3	Tiga baris
none	overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: none	Tiada had

Contoh

<p visual="line-clamp:3">Text limited to 3 lines...</p>

Pratonton

Had Baris

visual="line-clamp:2" - Hadkan teks kepada baris tertentu

This is a very long text that will be clamped to just one single line with ellipsis.

This is a very long text that will be clamped to exactly two lines with ellipsis at the end.

This is a very long text that will be clamped to exactly three lines with ellipsis shown at the end of the third line.

Lihat Kod

<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small w:[200px]" visual="bg:primary text:white rounded:small line-clamp:1">This is a very long text that will be clamped to just one single line with ellipsis.</div>
  <div space="p:small w:[200px]" visual="bg:success text:white rounded:small line-clamp:2">This is a very long text that will be clamped to exactly two lines with ellipsis at the end.</div>
  <div space="p:small w:[200px]" visual="bg:warning text:black rounded:small line-clamp:3">This is a very long text that will be clamped to exactly three lines with ellipsis shown at the end of the third line.</div>
</div>

Nilai Arbitrari

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

<div visual="line:[custom-value]">Custom</div>