Presets

Line Clamp

Number of Lines

lines

Text Overflow

Word Break

Target Element

Element Type

Typography

Font Size

Line Height

1.5

Max Width

Preview Options

Show Fallback CSS

Container Width

400px

Preview Text

Live Preview

Lines: 2Max Width: 300pxLine Height: 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Max Height: 48px

Before & After Comparison

Without Line Clamp

With Line Clamp (2 lines)

Line Count Examples

1 Line

2 Lines

3 Lines

4 Lines

5 Lines

Generated CSS

p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Full CSS with Typography

/* CSS Line Clamp - Multi-line Text Truncation */
/* Lines: 2 | Overflow: ellipsis */

p {
  /* Required for line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* Optional styling */
  text-overflow: ellipsis;

  /* Typography (adjust as needed) */
  font-size: 16px;
  line-height: 1.5;
  max-width: 300px;
}

Fallback CSS (Legacy Support)

/* Fallback for older browsers */
p {
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(16px * 3);
  line-height: 1.5;
}

/* Modern browsers with line-clamp support */
@supports (-webkit-line-clamp: 2) {
  p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: none;
  }
}

Code Examples

Basic Line Clamp

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

Card Component

.card {
  width: 300px;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.card-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}

Responsive Line Clamp

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

@media (min-width: 768px) {
  .excerpt {
    -webkit-line-clamp: 3;
  }
}

@media (min-width: 1024px) {
  .excerpt {
    -webkit-line-clamp: 4;
  }
}

With Hover Expansion

.expandable-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: max-height 0.3s ease;
  cursor: pointer;
}

.expandable-text:hover,
.expandable-text:focus {
  -webkit-line-clamp: unset;
  display: block;
}

Table Cell Truncation

td.cell-truncate {
  max-width: 200px;
}

td.cell-truncate > span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

JavaScript Toggle

<!-- HTML -->
<div class="text-container">
  <p class="clamped-text">Long text content here...</p>
  <button class="read-more">Read More</button>
</div>

/* CSS */
.clamped-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamped-text.expanded {
  -webkit-line-clamp: unset;
  display: block;
}

/* JavaScript */
document.querySelector('.read-more').addEventListener('click', function() {
  const text = document.querySelector('.clamped-text');
  text.classList.toggle('expanded');
  this.textContent = text.classList.contains('expanded') ? 'Read Less' : 'Read More';
});

Reference

CSS Properties

Property	Value	Description
`-webkit-line-clamp`	Number	Maximum number of lines before truncation
`display`	-webkit-box	Required for line clamp to work
`-webkit-box-orient`	vertical	Required for multi-line truncation
`overflow`	hidden	Hides content beyond clamp
`text-overflow`	ellipsis \| clip	Indicator for truncated text

Browser Support

Browser	Version	Notes
Chrome	6+	Full support with -webkit prefix
Firefox	68+	Supports standard line-clamp
Safari	5+	Full support with -webkit prefix
Edge	17+	Full support
Opera	15+	Full support with -webkit prefix

Common Use Cases

Card Descriptions: Limit preview text in card components
Blog Excerpts: Show consistent excerpt lengths
Product Names: Truncate long product titles
Table Cells: Prevent cell content overflow
Navigation Items: Limit menu item text length
Comments/Reviews: Preview with "Read More" functionality
Tooltips: Compact preview content
Mobile Cards: Save space on smaller screens

Best Practices

Always include overflow: hidden with line-clamp
Set appropriate line-height for consistent truncation
Consider adding "Read More" for longer content
Use fallback max-height for older browsers
Test with various text lengths
Consider accessibility - provide way to access full text
Use word-break: break-word for URLs or long words
Combine with max-width for controlled containers

Accessibility Considerations

Truncated text may hide important information
Provide alternative access (expand, modal, tooltip)
Use aria-label or title for full text
Ensure "Read More" buttons are keyboard accessible
Consider screen reader users who may not see ellipsis