webkitlineclamp

WebkitLineClamp, commonly referred to by the CSS property -webkit-line-clamp, is a non-standard extension used to limit text content to a specified number of lines and hide the rest. It is primarily employed to create multi-line truncation with an implied ellipsis in user interface elements such as cards, summaries, or headlines.

Usage of this feature relies on treating the element as a vertical, multi-line box. Typical rules include display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: N; overflow: hidden, where N is the maximum number of lines to display. In many cases this is accompanied by text-overflow: ellipsis, though the core truncation is controlled by -webkit-line-clamp. The approach requires the container to have a defined height determined by the line-height and the target number of lines.

Compatibility and limitations: -webkit-line-clamp is supported in WebKit/Blink-based browsers such as Safari, Chrome, and other Chromium-derived browsers, but it is not supported in standard Firefox. It is a proprietary extension and not part of a formal CSS standard, which means its behavior can vary between environments and it may require vendor-prefixed rules. Because it relies on a specific rendering model, it can also be sensitive to font and line-height choices.

Alternatives and considerations: For cross-browser compatibility, developers often use JavaScript-based truncation or other layout techniques to achieve similar results. There is ongoing discussion about a standard multi-line truncation mechanism, but broad support remains a concern. When using -webkit-line-clamp, testing across target browsers is recommended to ensure consistent presentation.