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

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,n,i={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},8249:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return v},getElement:function(){return w}});var i=n(1594),r=n.n(i),l=n(5671),a=n(6547),o=n(5619),c=n(806),s=n(942),u=n.n(s),d=function(e){return r().createElement("li",{className:u()("slds-list__item slds-m-right_large slds-grid",e.className)},r().createElement("span",null,"To:"),r().createElement("span",{className:"slds-m-left_xx-small slds-truncate",title:e.title},e.children),r().createElement("span",{className:"slds-m-left_xx-small slds-no-flex"}," + 44 more"))},f=function(e){return r().createElement("ul",null,r().createElement(d,{title:"Lei Chan",className:"slds-truncate_container_"+e.width},r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Lei Chan")),r().createElement(d,{title:"Lei Chan with Long Name",className:"slds-truncate_container_"+e.width},r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Lei Chan with Long Name")),r().createElement(d,{title:"Lei Chan with Long Name that might go on for quite some distance futher than you might expect",className:"slds-truncate_container_"+e.width},r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Lei Chan with Long Name that might go on for quite some distance futher than you might expect")))},h=[{id:"fluid",label:"Single line",element:r().createElement("div",{className:"slds-size_1-of-2"},r().createElement("p",{className:"slds-truncate",title:"Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages."},"Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages."))},{id:"nested-grids",label:"Single line within nested grid containers",element:r().createElement("div",{className:"slds-grid",style:{width:"200px"}},r().createElement("div",{className:"slds-grid slds-has-flexi-truncate"},r().createElement("p",{className:"slds-truncate",title:"Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages."},"Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages.")))},{id:"25%",label:"Max-width 25%",element:r().createElement(f,{width:"25"})},{id:"33%",label:"Max-width 33%",element:r().createElement(f,{width:"33"})},{id:"50%",label:"Max-width 50%",element:r().createElement(f,{width:"50"})},{id:"66%",label:"Max-width 66%",element:r().createElement(f,{width:"66"})},{id:"75%",label:"Max-width 75%",element:r().createElement(f,{width:"75"})}],m=l.XB.code,g=l.XB.h2,p=l.XB.h3,x=l.XB.p,w=function(){return(0,i.createElement)(l.Ay,{},(0,i.createElement)("div",{className:"doc lead"},"When applying truncation, place the full text in a title attribute so that it’s accessible on hover."),(0,i.createElement)(o.A,{type:"note",heading:"note"},(0,i.createElement)("p",null,"There is an iOS bug that is triggered when you add a component from Visualforce into S1 using an iFrame. The truncated element does not recognize its width.")),g({id:"About-Truncation"},"About Truncation"),x({},"If problems occur when using truncation with elements that use flexbox, you might need to add the ",m({},".slds-has-flexi-truncate")," class on the flexbox child node ( ",m({},".slds-col")," or ",m({},".slds-col_padded")," elements) that contains the truncated text."),g({id:"Examples"},"Examples"),p({id:"Single-Line"},"Single Line"),(0,i.createElement)(a.A,null,(0,c.NO)(h,"fluid")),p({id:"Single-Line-with-Nested-Grid-Containers"},"Single Line with Nested Grid Containers"),(0,i.createElement)(a.A,null,(0,c.NO)(h,"nested-grids")),p({id:"Maximum-Width-of-25percent"},"Maximum Width of 25%"),(0,i.createElement)(a.A,null,(0,c.NO)(h,"25%")),p({id:"Maximum-Width-of-33percent"},"Maximum Width of 33%"),(0,i.createElement)(a.A,null,(0,c.NO)(h,"33%")),p({id:"Maximum-Width-of-75percent"},"Maximum Width of 75%"),(0,i.createElement)(a.A,null,(0,c.NO)(h,"75%")))},v=function(){return(0,l.Qr)(w())}}},r={};function l(e){var t=r[e];if(void 0!==t)return t.exports;var n=r[e]={id:e,exports:{}};return i[e](n,n.exports,l),n.exports}l.m=i,l.amdO={},e=[],l.O=function(t,n,i,r){if(!n){var a=1/0;for(u=0;u<e.length;u++){n=e[u][0],i=e[u][1],r=e[u][2];for(var o=!0,c=0;c<n.length;c++)(!1&r||a>=r)&&Object.keys(l.O).every(function(e){return l.O[e](n[c])})?n.splice(c--,1):(o=!1,r<a&&(a=r));if(o){e.splice(u--,1);var s=i();void 0!==s&&(t=s)}}return t}r=r||0;for(var u=e.length;u>0&&e[u-1][2]>r;u--)e[u]=e[u-1];e[u]=[n,i,r]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},l.t=function(e,i){if(1&i&&(e=this(e)),8&i)return e;if("object"==typeof e&&e){if(4&i&&e.__esModule)return e;if(16&i&&"function"==typeof e.then)return e}var r=Object.create(null);l.r(r);var a={};t=t||[null,n({}),n([]),n(n)];for(var o=2&i&&e;("object"==typeof o||"function"==typeof o)&&!~t.indexOf(o);o=n(o))Object.getOwnPropertyNames(o).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},l.d(r,a),r},l.d=function(e,t){for(var n in t)l.o(t,n)&&!l.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},l.e=function(){return Promise.resolve()},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=6702,function(){var e={6702:0};l.O.j=function(t){return 0===e[t]};var t=function(t,n){var i,r,a=n[0],o=n[1],c=n[2],s=0;if(a.some(function(t){return 0!==e[t]})){for(i in o)l.o(o,i)&&(l.m[i]=o[i]);if(c)var u=c(l)}for(t&&t(n);s<a.length;s++)r=a[s],l.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return l.O(u)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),l.nc=void 0;var a=l.O(void 0,[3540],function(){return l(8249)});a=l.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/utilities/truncation/docs.mdx.js"]=a}();