Text ellipsis and line clamping

line-clamp.scss

p {
  display: inline-block; // fallback for CSS4
  display: -webkit-inline-box; // specialized renderer supported by all major browsers
  -webkit-box-orient: vertical; // Required by FF for -webkit-line-clamp
  -webkit-line-clamp: 1;
  line-clamp: 1; // Forward CSS4 support

  font-size: var(--size);
  line-height: calc(var(--size) * 1.2); // leave wiggle room for descending characters (e.g. jy...)
  overflow: hidden; // required for ellipsis
  max-height: 1.2em; // based on font-size; same as above multiplier
  text-overflow: ellipsis;
}