{"componentChunkName":"component---src-pages-patterns-overflow-content-index-mdx","path":"/patterns/overflow-content/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Overflow content","description":"Overflow content is text, such as a paragraph or a text string, that exceeds a desired space. It also applies to a series of components that surpass a given space."},"relativePagePath":"/patterns/overflow-content/index.mdx","titleType":"prepend","MdxNode":{"id":"5c93187b-332b-548d-b73e-948d007109e5","children":[],"parent":"baae0af4-6f97-5c7a-90fc-16f4fd270a92","internal":{"content":"---\ntitle: Overflow content\ndescription: Overflow content is text, such as a paragraph or a text string, that exceeds a desired space. It also applies to a series of components that surpass a given space.\n---\n\n### _Overflow content_ is text, such as a paragraph or a text string, that exceeds a desired space. It also applies to a series of components that surpass a given space. Overflow content is typically reduced to fit a space or reduce repetition. Truncation and ‘Show more’ buttons are two ways to indicate that overflow content is continued elsewhere or below the fold.\n\n## Truncation\n\n\n\nUsage\nVariations\nCode\n‘Show more’ buttons\n\n\n\nTruncation, or shortening, is typically used for static text or links that exceed the size of their container. Truncated items are represented by an ellipsis `...` and should represent three or more truncated characters in a text string. There must be at least four characters of non-truncated content in a truncated string. Truncated items always include a browser tooltip on hover to show the entire string, name, or phrase that the ellipsis is representing. The only time a browser tooltip does not need to be used is at the end of a truncated paragraph.\n\n\n\n\n\n\nExample of a browser tooltip being used for truncation.\n\n\n\nExample of end-line truncation for a paragraph.\n\n\n
\n\n### Usage\n\nGood use cases for truncation include:\n\n- Breadcrumbs\n- Pagination\n- Long URL links\n- Paragraph of text (i.e. a description paragraph)\n- Shortening of a long item name (user- or platform-generated)\n\nTruncation should **not** be used on page headers, titles, labels, error messages, validation messages, notifications, menu items, or tabs.\n\n### Variations\n\nThere are three types of truncation: front-line, mid-line, and end-line.\n\n| Type | Purpose | | Default | Truncated |\n| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ----------------------------- | --------------------------- |\n| _Front-line_ | Used at the beginning of a text string to indicate the text is continued from a previous location. | | `123456789` | `...56789` |\n| _Mid-line_ | Used when several text strings have different beginnings and/or endings but the exact same middle characters. Can also be used to shorten a phrase or text string when the end of a string cannot be truncated by an ellipsis. | | `123400005678` `987600004321` | `1234...5678` `9876...4321` |\n| _End-line_ | Used at the end of a character string or paragraph to indicate that there is more content in another location, to show that the pattern in a sequence continues, or to shorten a long text string. | | `123456789` | `12345...` |\n\n
\n\n#### Ellipses alone\n\nAn ellipsis on its own may also represent condensed content. This type of truncation requires an overflow menu on hover instead of a browser tooltip.\n\n\n\n\n\n\n\n Example of a truncated breadcrumb utilizing an ellipsis with an overflow menu.\n\n\n\n
\n\n### Code\n\nTo use front- and end-line truncation, enter the appropriate class below and add `title` to populate the browser tooltip that appears when truncated text is hovered. The `width` of the container (or the text element itself) also needs to be configured in order to calculate where the truncation will start.\n\n| Type | Class |\n| ----------- | --------------------------- |\n| _Frontline_ | `.bx--text-truncate--front` |\n| _End-line_ | `.bx--text-truncate--end` |\n\n
\n\n#### Example Usage\n\n
\n\n```html\n\n 123456789\n
\n```\n\n```css\n.container {\n width: 65px;\n}\n```\n\n```css\n.bx--front-line {\n width: 100%;\n display: inline-block;\n direction: rtl;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n```\n\n
\n\n#### Result\n\n
\n\n\n\n\n\n\n\n
\n\n
\n\n#### Mid-line truncation\n\nMid-line truncation does not have its own class as it requires JavaScript. This example in CodePen shows how it is implemented.\n\n\n \n \n See the Pen{' '}\n Middle Truncation{' '}\n by Carbon Design System (@carbon)\n on CodePen.\n \n \n
\n\n
\n\n### 'Show more' buttons\n\nThe ‘Show more’ button is used when there is a significant amount of overflow content. Implementing a ‘Show more’ button gives a user the ability to see the content in more digestible chunks, as opposed to all at once. A ‘Show more’ button is used in place of scrolling, gradients, or fades as they are more prominent and actionable. If needed, a 'Show less' can be used to again hide the content the user opened. ‘Show more’ can also be presented as ‘Load more’ in cases where performance is a concern. See the [Loading](/components/loading) section for additional details.\n\n\n\n\n\n\nExample of the 'Show more' button in context.\n\n\n
\n","type":"Mdx","contentDigest":"da0da9131ef30d17bd4982d26cd42850","counter":1226,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Overflow content","description":"Overflow content is text, such as a paragraph or a text string, that exceeds a desired space. It also applies to a series of components that surpass a given space."},"exports":{},"rawBody":"---\ntitle: Overflow content\ndescription: Overflow content is text, such as a paragraph or a text string, that exceeds a desired space. It also applies to a series of components that surpass a given space.\n---\n\n### _Overflow content_ is text, such as a paragraph or a text string, that exceeds a desired space. It also applies to a series of components that surpass a given space. Overflow content is typically reduced to fit a space or reduce repetition. Truncation and ‘Show more’ buttons are two ways to indicate that overflow content is continued elsewhere or below the fold.\n\n## Truncation\n\n\n\nUsage\nVariations\nCode\n‘Show more’ buttons\n\n\n\nTruncation, or shortening, is typically used for static text or links that exceed the size of their container. Truncated items are represented by an ellipsis `...` and should represent three or more truncated characters in a text string. There must be at least four characters of non-truncated content in a truncated string. Truncated items always include a browser tooltip on hover to show the entire string, name, or phrase that the ellipsis is representing. The only time a browser tooltip does not need to be used is at the end of a truncated paragraph.\n\n\n\n\n\n\nExample of a browser tooltip being used for truncation.\n\n\n\nExample of end-line truncation for a paragraph.\n\n\n
\n\n### Usage\n\nGood use cases for truncation include:\n\n- Breadcrumbs\n- Pagination\n- Long URL links\n- Paragraph of text (i.e. a description paragraph)\n- Shortening of a long item name (user- or platform-generated)\n\nTruncation should **not** be used on page headers, titles, labels, error messages, validation messages, notifications, menu items, or tabs.\n\n### Variations\n\nThere are three types of truncation: front-line, mid-line, and end-line.\n\n| Type | Purpose | | Default | Truncated |\n| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ----------------------------- | --------------------------- |\n| _Front-line_ | Used at the beginning of a text string to indicate the text is continued from a previous location. | | `123456789` | `...56789` |\n| _Mid-line_ | Used when several text strings have different beginnings and/or endings but the exact same middle characters. Can also be used to shorten a phrase or text string when the end of a string cannot be truncated by an ellipsis. | | `123400005678` `987600004321` | `1234...5678` `9876...4321` |\n| _End-line_ | Used at the end of a character string or paragraph to indicate that there is more content in another location, to show that the pattern in a sequence continues, or to shorten a long text string. | | `123456789` | `12345...` |\n\n
\n\n#### Ellipses alone\n\nAn ellipsis on its own may also represent condensed content. This type of truncation requires an overflow menu on hover instead of a browser tooltip.\n\n\n\n\n\n\n\n Example of a truncated breadcrumb utilizing an ellipsis with an overflow menu.\n\n\n\n
\n\n### Code\n\nTo use front- and end-line truncation, enter the appropriate class below and add `title` to populate the browser tooltip that appears when truncated text is hovered. The `width` of the container (or the text element itself) also needs to be configured in order to calculate where the truncation will start.\n\n| Type | Class |\n| ----------- | --------------------------- |\n| _Frontline_ | `.bx--text-truncate--front` |\n| _End-line_ | `.bx--text-truncate--end` |\n\n
\n\n#### Example Usage\n\n
\n\n```html\n\n 123456789\n
\n```\n\n```css\n.container {\n width: 65px;\n}\n```\n\n```css\n.bx--front-line {\n width: 100%;\n display: inline-block;\n direction: rtl;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n```\n\n
\n\n#### Result\n\n
\n\n\n\n\n\n\n\n
\n\n
\n\n#### Mid-line truncation\n\nMid-line truncation does not have its own class as it requires JavaScript. This example in CodePen shows how it is implemented.\n\n\n \n \n See the Pen{' '}\n Middle Truncation{' '}\n by Carbon Design System (@carbon)\n on CodePen.\n \n \n
\n\n
\n\n### 'Show more' buttons\n\nThe ‘Show more’ button is used when there is a significant amount of overflow content. Implementing a ‘Show more’ button gives a user the ability to see the content in more digestible chunks, as opposed to all at once. A ‘Show more’ button is used in place of scrolling, gradients, or fades as they are more prominent and actionable. If needed, a 'Show less' can be used to again hide the content the user opened. ‘Show more’ can also be presented as ‘Load more’ in cases where performance is a concern. See the [Loading](/components/loading) section for additional details.\n\n\n\n\n\n\nExample of the 'Show more' button in context.\n\n\n
\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/patterns/overflow-content/index.mdx"}}}}