Line Clamp

Use line-clamp-{count} utilities to truncate text after a specific number of lines, adding an ellipsis at the end.

---

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:

Text('Mar 10, 2020')
Text('Boost your conversion rate')
Style('line-clamp-3', child: Text('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.'))
Image.network('/img/lindsay.jpg')
Text('Lindsay Walton')

Class reference

Class	Max Lines
line-clamp-1	1 line
line-clamp-2	2 lines
line-clamp-3	3 lines
line-clamp-4	4 lines
line-clamp-5	5 lines
line-clamp-6	6 lines

All line-clamp-{n} utilities set maxLines and textOverflow: ellipsis together.