Campus Design System

Appearance

Line Clamp ​

Utilities for specifying the number of lines in a text block.

Class NameCSS Equivalent
.line-clamp-none-webkit-line-clamp: unset;
.line-clamp-1overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
.line-clamp-2overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
.line-clamp-3overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
.line-clamp-4overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
.line-clamp-5overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
.line-clamp-6overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;

Line Clamp None ​

The .line-clamp-none class sets the -webkit-line-clamp property to unset.

html
<div class="line-clamp-none">This is a text with no line clamp</div>

Line Clamp ​

The .line-clamp-{size} classes set the -webkit-line-clamp property to create a specified number of lines within the text block.

.line-clamp-1
.line-clamp-2
.line-clamp-3
.line-clamp-4
.line-clamp-5
.line-clamp-6
CEO
Alice Johnson
alice.johnson@company.com
About
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.
html
<div class="line-clamp-1">This is a text with line clamp 1</div>
<div class="line-clamp-2">This is a text with line clamp 2</div>
<div class="line-clamp-3">This is a text with line clamp 3</div>
<div class="line-clamp-4">This is a text with line clamp 4</div>
<div class="line-clamp-5">This is a text with line clamp 5</div>
<div class="line-clamp-6">This is a text with line clamp 6</div>