Line Clamp - Tailwindcss

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";

export const title = "line-clamp"; export const description = "Utilities for clamping text to a specific number of lines.";

<ApiTable rows={[ [ "line-clamp-<number>", "overflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: <number>;", ], [ "line-clamp-none", "overflow: visible;\ndisplay: block;\n-webkit-box-orient: horizontal;\n-webkit-line-clamp: unset;", ], [ "line-clamp-(<custom-property>)", "overflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: var(<custom-property>);", ], [ "line-clamp-[<value>]", "overflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: <value>;", ], ]} />

Examples

Basic example

Use line-clamp-<number> utilities like line-clamp-2 and line-clamp-3 to truncate multi-line text after a specific number of lines:

<Figure> <Example padding={false}> { <div className="px-4 sm:px-0"> <article className="mx-auto max-w-sm p-8 text-gray-700 dark:text-gray-400"> <time dateTime="2020-03-16" className="block text-sm leading-6 text-gray-500 dark:text-gray-400"> Mar 10, 2020 </time> <div className="mt-2 text-lg font-semibold text-gray-900 dark:text-gray-200">Boost your conversion rate</div> <p className="mt-4 line-clamp-3 text-sm leading-6 text-gray-500 dark:text-gray-400"> Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim. </p> <div className="mt-4 flex gap-x-2.5 text-sm leading-6 font-semibold text-gray-900 dark:text-gray-200">

      Lindsay Walton
    </div>
  </article>
</div>

} </Example>

html

<!-- [!code classes:line-clamp-3] -->
<article>
  <time>Mar 10, 2020</time>
  <h2>Boost your conversion rate</h2>
  <p class="line-clamp-3">
    Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut
    sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat
    dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt
    ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur
    enim.
  </p>
  <div>
    
    Lindsay Walton
  </div>
</article>

</Figure>

Undoing line clamping

Use line-clamp-none to undo a previously applied line clamp utility:

html

<!-- [!code classes:lg:line-clamp-none] -->
<p class="line-clamp-3 lg:line-clamp-none">
  <!-- ... -->
</p>

Using a custom value

Responsive design