Truncate

These classes allows you to truncate texts to a number of lines on any HTMLElement

Platform  
css
   â”‚    Support  
Chromium supported
Firefox supported
Safari supported
Edge supported
Since  2.0.0
   â”‚   
Olivier Bossel
Olivier Bossel
   â”‚   
beta

  Preview

1 line

Maiores incidunt sit voluptas deserunt rerum dolore veritatis.
Excepturi ut assumenda officiis voluptate.
Quod officiis dolore est vel illo mollitia.
Natus libero impedit laborum labore nobis quia temporibus nulla laudantium.
Occaecati veritatis natus pariatur ea sunt aut enim corrupti.
Dicta reprehenderit animi rerum eveniet.
Neque possimus autem.
Quas eos explicabo voluptatum quasi.
Ut magni voluptatibus.
Recusandae quia rerum est tempore.
Nobis maiores sed occaecati quo qui reprehenderit.
Nesciunt sunt delectus quisquam tenetur eveniet rerum.
Modi quisquam perferendis tenetur dolorem nam consequuntur qui ab.
Sed esse quam odit praesentium velit.
Nesciunt pariatur harum officiis hic cumque quod.

 

Loading code example. Please wait...

2 line

Minima sunt earum eum quis voluptate.
Voluptas pariatur commodi eligendi tenetur amet laudantium quo nemo.
Nobis explicabo aut soluta illo dolorum nisi maxime recusandae.
Quos voluptates iure.
Eveniet quas aperiam facere aspernatur aperiam.
Excepturi optio ut dolor voluptatem vero est.
Ipsa aut exercitationem in dicta accusamus repudiandae.
Doloremque dolor rerum.
Cupiditate assumenda rem.
Porro voluptatem soluta pariatur laboriosam enim quia consectetur natus est.
Sit vero ipsum.
Quas illum laboriosam provident vero.
Quam eaque est omnis accusamus quae sunt voluptate dolore.
Impedit a dignissimos.
Reiciendis vitae ut perspiciatis non atque consequuntur dolore.

 

Loading code example. Please wait...

3 lines

Sunt placeat laboriosam ex.
Deserunt consequatur deleniti nostrum accusamus amet ad harum non aut.
Sapiente autem nobis.
Qui nulla incidunt ea dolores ipsam explicabo recusandae consequatur.
Ut fugiat distinctio provident nostrum et in est.
Ut fugiat est quia odio quisquam.
Quod laboriosam odit quam harum non.
Dolores et hic nam aliquid.
Nostrum molestiae aut ipsum ut est.
Facere magnam aut eum sed aut asperiores.
Quo vitae est corporis velit amet temporibus alias est at.
Laborum ut quisquam consequatur sed.
Facere officia eligendi.
Itaque omnis qui veniam officia.
Atque molestiae rem possimus.

 

Loading code example. Please wait...

4 lines

Officiis molestiae soluta vel id ratione eum dolores aliquam.
Aspernatur veniam rerum possimus pariatur.
Modi rerum harum.
Ad consectetur cum est eum veritatis voluptatibus facilis delectus.
Hic ipsam deleniti perferendis ad illo.
Fugit nobis deserunt eos soluta iusto inventore tempora quam.
Explicabo dolorem aliquam.
Tempora repellendus et illo ratione est eligendi.
Nemo in quam laudantium nesciunt ea voluptate.
Et adipisci sed consequatur soluta et voluptas.
Omnis quia error incidunt alias ipsa dolorum ut.
Reprehenderit id deserunt eius.
Reiciendis qui ipsam.
Qui molestias architecto beatae illum labore tempore fugit ut.
Excepturi autem perspiciatis aut odit minima iste et tenetur.

 

Loading code example. Please wait...

5 lines

Veniam voluptas dolorem quibusdam nemo sed earum.
Rerum beatae iure rerum nam sit qui recusandae et.
Molestiae sint optio doloremque dolor sit hic quia sint.
Eos optio placeat tempore modi cum ipsa.
Odit exercitationem nesciunt possimus et delectus esse modi nulla est.
Aliquid ex sit non vel.
Optio numquam rerum.
Delectus consequuntur voluptas aperiam facilis eos est voluptatum optio.
Numquam vel ipsum est reprehenderit.
Occaecati et explicabo reprehenderit possimus velit.
Exercitationem eum ut dolores.
Quia officia nihil non est iure aut.
Libero quia consequatur ab fugiat et.
Doloremque architecto non sunt.
Ut necessitatibus quae doloremque id non laboriosam fuga ex ducimus.

 

Loading code example. Please wait...

6 lines

Voluptatem accusamus sit voluptatem illo totam laboriosam.
Laborum ipsam consequuntur nemo praesentium necessitatibus.
Nostrum neque adipisci.
Minima qui impedit et.
Eum quia molestias assumenda provident quo odit.
Exercitationem aperiam incidunt doloremque est neque ea mollitia commodi.
Aut quia consequatur doloremque nam cupiditate.
Ut deserunt aperiam.
Deleniti doloremque omnis maiores minus est nisi.
Ullam rerum modi sunt laudantium.
Nostrum quos blanditiis id soluta consectetur iure voluptatibus esse repellat.
Vel reiciendis eos.
Aut quia deserunt et unde sit vel assumenda dolorum est.
Magni unde veritatis.
Aut sed quaerat in architecto excepturi.

 

Loading code example. Please wait...

7 lines

Deserunt culpa delectus fuga.
Nihil debitis cumque numquam ratione.
Eos omnis quae.
Assumenda illum fuga eligendi natus.
Nihil et quod qui omnis.
At molestias sunt.
Dicta nisi accusantium voluptas laborum minus debitis.
Quia aut labore commodi et animi.
Eligendi fugit velit aut nam.
Eius quos et voluptatem distinctio vitae voluptatibus soluta.
Ut voluptatibus facilis nihil.
A animi expedita quia laboriosam quia doloremque qui rerum quis.
Doloribus nulla voluptas rerum magnam nulla eaque explicabo.
Velit maxime aut cum qui.
Ea iure itaque.

 

Loading code example. Please wait...

8 lines

Molestiae molestiae sit quod aut.
In commodi eligendi distinctio.
Repellat et alias veritatis.
Fuga rerum eaque at quo debitis accusamus voluptatem.
Ut iure veniam in.
Qui quam animi necessitatibus impedit rerum cum.
Vel occaecati enim unde ducimus.
Dolor neque ut pariatur voluptatem id rem.
Veritatis laboriosam sit itaque recusandae optio.
Consequatur earum quasi dignissimos ipsum.
Corrupti autem alias corrupti aut.
Quidem sint quae.
Quo ut provident fugit aut et sed ullam tenetur.
Ex ea omnis debitis et inventore.
Laborum quis recusandae nulla pariatur ut perferendis iure ratione reiciendis.

 

Loading code example. Please wait...

9 lines

Libero assumenda sapiente corporis.
Est dolorem molestiae temporibus velit exercitationem libero harum.
Eveniet quia necessitatibus non quibusdam ut dolores rem fugiat.
Praesentium sed in.
Harum quis ea et optio minima quo in.
Et ducimus illum laudantium.
Est iusto placeat sit esse et et similique.
Magni ut accusantium in a.
Adipisci impedit facere et est placeat non aperiam.
Sapiente quo quo voluptas iusto atque vero.
Et vel quis blanditiis voluptates optio qui id laborum soluta.
Dolor ex fugit quas consectetur quo culpa.
Dolorem fuga quasi consequuntur rerum eligendi.
Ut dolor quia explicabo consequatur fugit sunt et eum sit.
Non fugiat quae vero dicta.

 

Loading code example. Please wait...

10 lines

Eligendi non est eum eveniet.
Eligendi eum nemo numquam molestiae delectus ea eos.
Et officiis ut inventore nihil et voluptas qui debitis odio.
Dolore ut non delectus.
Omnis eos aperiam reprehenderit.
Repudiandae commodi accusamus aut voluptatem inventore accusamus sunt.
Voluptatem at delectus dolorem doloribus nesciunt quibusdam.
Perferendis atque voluptatem iste corporis ad.
Reprehenderit rerum cumque voluptatem et qui nihil ipsum.
Harum possimus quia aut porro dicta dolore molestiae.
Consequatur voluptas quo ipsum sit.
Quia provident laboriosam est ex adipisci quae at aperiam perferendis.
Modi cum id sit cum sit sit eaque ut.
Sapiente ullam quos et quidem est alias ut impedit.
Ut sunt neque.

 

Loading code example. Please wait...

  Install

  CSS Classes

  1. s-truncate:1

    Truncate the container to 1 line(s),

  2. s-truncate:2

    Truncate the container to 2 line(s),

  3. s-truncate:3

    Truncate the container to 3 line(s),

  4. s-truncate:4

    Truncate the container to 4 line(s),

  5. s-truncate:5

    Truncate the container to 5 line(s),

  6. s-truncate:6

    Truncate the container to 6 line(s),

  7. s-truncate:7

    Truncate the container to 7 line(s),

  8. s-truncate:8

    Truncate the container to 8 line(s),

  9. s-truncate:9

    Truncate the container to 9 line(s),

  10. s-truncate:10

    Truncate the container to 10 line(s)

Bugs
are not our friends...

Don't hesitate to declare an issue if something does not works as expected.

Declare my issue on Github Talk about it on Discord

The more we are,
the stronger we become.

Don't hesitate to tell some words to you friends about us. The goal is to became more and more each days to help each others...

Support us on Patreon! Share on Facebook! Make a tweet!

The more we are,
the stronger we become.

Don't be afraid to join us on Discord.

Join us on discord!

We love,
Open source!

All of our codebase can be found on Github. We hope that you may contribute to help us make our tools even better!

Discover our codebase!

Welcome on