diff --git a/packages/components/typography/ellipsis/Truncate.tsx b/packages/components/typography/ellipsis/Truncate.tsx index d5e3487d63..e7c14df953 100644 --- a/packages/components/typography/ellipsis/Truncate.tsx +++ b/packages/components/typography/ellipsis/Truncate.tsx @@ -228,6 +228,19 @@ export default class Truncate extends React.Component text.replace(/\s+$/, ''); + breakAtWordBoundary = (text: string) => { + // Try to break at word boundary to avoid splitting words + // Find the last word boundary (space or punctuation) to break at + const wordBoundaryMatch = text.match(/^(.*[\s\-,;.!?])/); + if (wordBoundaryMatch) { + const [, boundaryText] = wordBoundaryMatch; + if (boundaryText.trim().length > 0) { + return boundaryText; + } + } + return text; + }; + createMarkup = (str: string) => ( ); @@ -296,6 +309,7 @@ export default class Truncate extends React.Component