0build.dev
Choose a layout

line-clamp

Report an Issue
Class Description

line-clamp-1

Truncates text to a single line and hides overflow. Useful for titles, labels, and compact previews.

CSS Rules 

.line-clamp-1 {
  overflow: hidden;
  display: hidden;
  -webkit-box-orient: hidden;
  -webkit-line-clamp: hidden;
}

Usage 

<element class="line-clamp-1" />

Responsive

Prefix .line-clamp-1 utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:line-clamp-1" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="line-clamp-1:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="line-clamp-1:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before line-clamp-1::before" />

<element class="content-after line-clamp-1::after" />
 .line-clamp-1 Truncates text to a single line and hides overflow. Useful for titles, labels, and compact previews.

line-clamp-2

Clamps text to 2 lines with an ellipsis.

CSS Rules 

.line-clamp-2 {
  overflow: hidden;
  display: hidden;
  -webkit-box-orient: hidden;
  -webkit-line-clamp: hidden;
}

Usage 

<element class="line-clamp-2" />

Responsive

Prefix .line-clamp-2 utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:line-clamp-2" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="line-clamp-2:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="line-clamp-2:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before line-clamp-2::before" />

<element class="content-after line-clamp-2::after" />
 .line-clamp-2 Clamps text to 2 lines with an ellipsis.

line-clamp-3

Clamps text to 3 lines with an ellipsis.

CSS Rules 

.line-clamp-3 {
  overflow: hidden;
  display: hidden;
  -webkit-box-orient: hidden;
  -webkit-line-clamp: hidden;
}

Usage 

<element class="line-clamp-3" />

Responsive

Prefix .line-clamp-3 utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:line-clamp-3" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="line-clamp-3:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="line-clamp-3:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before line-clamp-3::before" />

<element class="content-after line-clamp-3::after" />
 .line-clamp-3 Clamps text to 3 lines with an ellipsis.

line-clamp-4

Limits text to four visible lines and clips the rest. Good for cards and content previews.

CSS Rules 

.line-clamp-4 {
  overflow: hidden;
  display: hidden;
  -webkit-box-orient: hidden;
  -webkit-line-clamp: hidden;
}

Usage 

<element class="line-clamp-4" />

Responsive

Prefix .line-clamp-4 utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:line-clamp-4" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="line-clamp-4:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="line-clamp-4:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before line-clamp-4::before" />

<element class="content-after line-clamp-4::after" />
 .line-clamp-4 Limits text to four visible lines and clips the rest. Good for cards and content previews.

line-clamp-5

Limits text to five visible lines and clips the rest. Good for cards and content previews.

CSS Rules 

.line-clamp-5 {
  overflow: hidden;
  display: hidden;
  -webkit-box-orient: hidden;
  -webkit-line-clamp: hidden;
}

Usage 

<element class="line-clamp-5" />

Responsive

Prefix .line-clamp-5 utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:line-clamp-5" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="line-clamp-5:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="line-clamp-5:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before line-clamp-5::before" />

<element class="content-after line-clamp-5::after" />
 .line-clamp-5 Limits text to five visible lines and clips the rest. Good for cards and content previews.

line-clamp-6

Limits text to six visible lines and clips the rest. Good for cards and content previews.

CSS Rules 

.line-clamp-6 {
  overflow: hidden;
  display: hidden;
  -webkit-box-orient: hidden;
  -webkit-line-clamp: hidden;
}

Usage 

<element class="line-clamp-6" />

Responsive

Prefix .line-clamp-6 utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:line-clamp-6" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="line-clamp-6:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="line-clamp-6:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before line-clamp-6::before" />

<element class="content-after line-clamp-6::after" />
 .line-clamp-6 Limits text to six visible lines and clips the rest. Good for cards and content previews.

line-clamp-none

Removes line clamping and restores normal multiline text overflow.

CSS Rules 

.line-clamp-none {
  overflow: visible;
  display: visible;
  -webkit-box-orient: visible;
  -webkit-line-clamp: visible;
}

Usage 

<element class="line-clamp-none" />

Responsive

Prefix .line-clamp-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:line-clamp-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="line-clamp-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="line-clamp-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before line-clamp-none::before" />

<element class="content-after line-clamp-none::after" />
 .line-clamp-none Removes line clamping and restores normal multiline text overflow.