Text Overflow

vel-src: typography.css

Utilities for controlling text overflow in an element.

Class	Properties
vel-truncate	overflow: hidden; text-overflow: ellipsis; white-space: nowrap
vel-text-ellipsis	text-overflow: ellipsis
vel-text-clip	text-overflow: clip

Examples

Text overflow handling

vel-truncate — This is a very long text that gets truncated with an ellipsis when it overflows

vel-overflow-ellipsis — Another long overflow example with overflow hidden

example.html

<div class="vel-flex vel-flex-col vel-gap-3">
  <div class="vel-truncate" style="background:#1a2236;border:1px solid #1e2d45;border-radius:6px;padding:10px 14px;max-width:300px;color:#e2e8f0">
    vel-truncate — This is a very long text that gets truncated with an ellipsis when it overflows
  </div>
  <div class="vel-overflow-ellipsis vel-overflow-hidden" style="background:#1a2236;border:1px solid #1e2d45;border-radius:6px;padding:10px 14px;max-width:300px;color:#94a3b8;white-space:nowrap">
    vel-overflow-ellipsis — Another long overflow example with overflow hidden
  </div>
</div>