@salesforce-ux/design-system/__internal/chunked/docs/ui/utilities/line-clamp/docs.mdx.js

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/line-clamp/docs.mdx.js"]=function(e){function t(t){for(var i,s,u=t[0],r=t[1],c=t[2],d=0,o=[];d<u.length;d++)s=u[d],Object.prototype.hasOwnProperty.call(l,s)&&l[s]&&o.push(l[s][0]),l[s]=0;for(i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i]);for(m&&m(t);o.length;)o.shift()();return n.push.apply(n,c||[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],i=!0,u=1;u<a.length;u++){var r=a[u];0!==l[r]&&(i=!1)}i&&(n.splice(t--,1),e=s(s.s=a[0]))}return e}var i={},l={96:0},n=[];function s(t){if(i[t])return i[t].exports;var a=i[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=i,s.d=function(e,t,a){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)s.d(a,i,function(t){return e[t]}.bind(null,i));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var u=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],r=u.push.bind(u);u.push=t,u=u.slice();for(var c=0;c<u.length;c++)t(u[c]);var m=r;return n.push([802,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},802:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return v})),a.d(t,"getContents",(function(){return b}));var i=a(0),l=a.n(i),n=a(4),s=a(2),u=a(14),r=a(1),c=[{id:"default",label:"Line Clamp - Default",demoStyles:"width: 300px",element:l.a.createElement("p",{className:"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.")},{id:"x-small",label:"Line Clamp - X-Small",demoStyles:"width: 300px",element:l.a.createElement("p",{className:"slds-line-clamp_x-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.")},{id:"small",label:"Line Clamp - Small",demoStyles:"width: 300px",element:l.a.createElement("p",{className:"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.")},{id:"medium",label:"Line Clamp - Medium",demoStyles:"width: 300px",element:l.a.createElement("p",{className:"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.")},{id:"large",label:"Line Clamp - Large",demoStyles:"width: 300px",element:l.a.createElement("p",{className:"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.")},{id:"block children",label:"Block Level Children",demoStyles:"width: 300px",element:l.a.createElement("div",{className:"slds-line-clamp_small"},l.a.createElement("p",null,"Lorem ipsum."),l.a.createElement("p",null,"dolor."),l.a.createElement("p",null,"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."))}],m=n.c.code,d=n.c.h2,o=n.c.h3,p=n.c.li,f=n.c.p,h=n.c.ul,v=function(){return Object(i.createElement)(n.b,{},Object(i.createElement)("div",{className:"doc lead"},"Line Clamp allows for multi-line text truncation."),d({id:"About-Line-Clamp"},"About Line Clamp"),f({},"When applied to text-based elements, Line Clamp allows for configurable multi-line text truncation."),f({},"SLDS supports four different line clamp limits:"),h({},p({},m({},"slds-line-clamp")," - truncation is determined by a token, default will truncate at 3 lines of content"),p({},m({},"slds-line-clamp_x-small")," - truncates at 2 lines of content"),p({},m({},"slds-line-clamp_small")," - truncates at 3 lines of content"),p({},m({},"slds-line-clamp_medium")," - truncates at 5 lines of content"),p({},m({},"slds-line-clamp_large")," - truncates at 7 lines of content")),Object(i.createElement)(u.a,{type:"warning",header:"IE11 Not Supported"},"The use of the ",Object(i.createElement)("code",null,"line-clamp")," css property is not supported in IE11."),Object(i.createElement)(u.a,{type:"warning",header:"Not Supported on Container Elements"},Object(i.createElement)("p",null,"Note that this class should only be applied directly to the text element that needs truncation."),Object(i.createElement)("p",null,"Applying this class to elements with html element children will produce unexpected results. This use case is not supported.")),d({id:"Examples"},"Examples"),o({id:"Default"},"Default"),f({},"The ",m({},"slds-line-clamp")," class name will truncate text after three lines. The value can be changed by reassigning a value to the ",m({},"line-clamp")," token."),Object(i.createElement)(s.a,{demoStyles:Object(r.e)(c,"default")},Object(r.f)(c,"default")),o({id:"X-Small"},"X-Small"),f({},"The ",m({},"slds-line-clamp_x-small")," class name will truncate text after two lines."),Object(i.createElement)(s.a,{style:Object(r.e)(c,"x-small")},Object(r.f)(c,"x-small")),o({id:"Small"},"Small"),f({},"The ",m({},"slds-line-clamp_small")," class name will truncate text after three lines."),Object(i.createElement)(s.a,{demoStyles:Object(r.e)(c,"small")},Object(r.f)(c,"small")),o({id:"Medium"},"Medium"),f({},"The ",m({},"slds-line-clamp_medium")," class name will truncate text after five lines."),Object(i.createElement)(s.a,{demoStyles:Object(r.e)(c,"medium")},Object(r.f)(c,"medium")),o({id:"Large"},"Large"),f({},"The ",m({},"slds-line-clamp_large")," class name will truncate text after seven lines."),Object(i.createElement)(s.a,{demoStyles:Object(r.e)(c,"large")},Object(r.f)(c,"large")))},b=function(){return Object(n.a)(v())}}});