How do you achieve multi-line truncation (line-clamp) in CSS?

Multi-line truncation requires a combination of outdated WebKit flexbox properties that have been globally adopted as a standard hack.

Unlike single-line truncation (text-overflow: ellipsis), truncating text after exactly 'X' lines requires display: -webkit-box, -webkit-line-clamp, and -webkit-box-orient: vertical. A newer, cleaner standard (line-clamp) is in the spec but lacks full support.