Bits of .NET

… Long Text Looks Bad, Add Ellipsis

Long titles break layouts. text-overflow: ellipsis truncates with “…”. Cleaner UI, consistent dimensions.

📝 Basic Ellipsis

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}

/* Multi-line truncation (WebKit) */
.multiline-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fallback for other browsers */
@supports not (-webkit-line-clamp: 3) {
  .multiline-truncate {
    max-height: 4.5em;
    overflow: hidden;
  }
}

🎯 Real-World Examples

/* Product title in card */
.product-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Comment preview */
.comment-preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Breadcrumbs with ellipsis */
.breadcrumb {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb a:last-child {
  text-overflow: ellipsis;
  overflow: hidden;
}

💡 Browser Support

• Single-line ellipsis: all browsers
• Multi-line ellipsis: WebKit/Blink only (Chrome, Safari, Edge)
• Firefox has limited support for -webkit-line-clamp (recent versions)
• Use fallback for older browsers