Line Clamp
- HTML/CSS:Dev Ready
- Layout:Desktop Only
You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20
About Line Clamp#
When applied to text-based elements, Line Clamp allows for configurable multi-line text truncation.
SLDS supports four different line clamp limits:
slds-line-clamp- truncation is determined by a token, default will truncate at 3 lines of contentslds-line-clamp_small- truncates at 3 lines of contentslds-line-clamp_medium- truncates at 5 lines of contentslds-line-clamp_large- truncates at 7 lines of content
IE11 Not Supported
The use of theline-clampcss property is not supported in IE11.
Not Supported on Container Elements
Note that this class should only be applied directly to the text element that needs truncation.
Applying this class to elements with html element children will produce unexpected results. This use case is not supported.
Examples#
Default#
The slds-line-clamp class name will truncate text after three lines. The value can be changed by a the line-clamp token.
Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.
<p class="slds-line-clamp">Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra
sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque
eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.</p>Small#
The slds-line-clamp_small class name will truncate text after three lines.
Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.
<p class="slds-line-clamp_small">Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra
sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque
eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.</p>Medium#
The slds-line-clamp_medium class name will truncate text after five lines.
Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.
<p class="slds-line-clamp_medium">Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra
sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque
eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.</p>Large#
The slds-line-clamp_large class name will truncate text after seven lines.
Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.
<p class="slds-line-clamp_large">Sed ut erat nec velit egestas porttitor sit amet et arcu. Aenean dui nisi, ultrices non pulvinar id, tristique vitae sapien. Sed non lacus id risus aliquam ultricies. Vestibulum accumsan nisl ante, ac aliquet erat rhoncus ac. Maecenas quam ipsum, pharetra
sed tristique sed, interdum et odio. Nunc accumsan feugiat enim, vel dictum nisl egestas eu. Morbi eu elit hendrerit, sollicitudin sem a, interdum elit. Vivamus eget pharetra urna. Proin tincidunt accumsan nibh, non finibus tellus malesuada vitae. Quisque
eu sodales erat, quis tempus diam. Vivamus egestas orci purus, sed efficitur ligula tincidunt at. Aliquam vel convallis ex, at lacinia quam. Pellentesque nec diam placerat, luctus enim ac, volutpat diam.</p>Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-line-clamp_small |
|---|---|
| Summary | Sets line clamp for small multi-line truncation |
| Restrict | * |
| Modifier | True |
| Selector | .slds-line-clamp_medium |
|---|---|
| Summary | Sets line clamp for medium multi-line truncation |
| Restrict | * |
| Modifier | True |
| Selector | .slds-line-clamp_large |
|---|---|
| Summary | Sets line clamp for large multi-line truncation |
| Restrict | * |
| Modifier | True |
Line Clamp Release Notes
2.11.0
Added
- Added Line Clamp utility with four modifier options:
.slds-line-clamp- clamps at 3 lines, value provided byline-clamptoken..slds-line-clamp_small- clamps at 3 lines.slds-line-clamp_medium- clamps at 5 lines.slds-line-clamp_large- clamps at 7 lines