CSS Line Clamp Utility

Feb 23, 2022 • Ben Sochar

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

If we’re using Bootstrap we can extend it as a utility to set the number of lines we want.

# import the required files
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables'; # This should be your localized varibles file.
@import 'bootstrap/scss/utilities';

$utilities: map-merge(
  $utilities,
  (
    "line-clamp": (
      property: -webkit-line-clamp,
      class: line-clamp,
      values: (
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        unset: 'unset'
      )
    )
  )
);

Bootstrap, CSS, SASS, & snippet