@gitlab/ui/dist/components/utilities/friendly_wrap/friendly_wrap.documentation.js

GitLab UI Components

var description = "The friendly-wrap component lets you wrap text in a predictable way by appending [`<wbr>`] elements\nto specific break-symbols.\n\n[`<wbr>`]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr\n\n## Internet Explorer 11\n\nIE11 doesn't support the `<wbr>` element: <https://caniuse.com/#search=wbr>\nTo use this component on IE11, you'll need some CSS to preserve its behaviour:\n\n```css\nwbr {\n  display: inline-block;\n}\n```\n\n## Usage\n\n### Default\n\nBy default, `GlFriendlyWrap` wraps text with slashes (`/`) as the break-symbol, which is especially\nuseful when displaying paths or URLs:\n\n```html\n<gl-friendly-wrap text=\"/some/file/path\" />\n```\n\nThe code above renders to the following HTML:\n\n```html\n<span class=\"text-break\">/<wbr>some/<wbr>file/<wbr>path</span>\n```\n\n### Custom symbols\n\nMultiple custom break-symbols can be defined via the `GlFriendlyWrap` prop:\n\n```html\n<gl-friendly-wrap\n  :symbols=\"[';', '-', '.']\"\n  text=\"some;text-that.needs;to-be.wrapped\"\n/>\n```\n\nWhich renders to:\n\n```html\n<span class=\"text-break\">some;<wbr>text-<wbr>that.<wbr>needs;<wbr>to-<wbr>be.<wbr>wrapped</span>\n```\n\n### Break words\n\nSymbols can be words too:\n\n```html\n<gl-friendly-wrap\n  :symbols=\"['and']\"\n  text=\"it goes on and on and on and on\"\n/>\n```\n\nWhich renders to:\n\n```html\n<span class=\"text-break\">it goes on and<wbr> on and<wbr> on and<wbr> on</span>\n```\n";

var friendly_wrap_documentation = {
  description
};

export default friendly_wrap_documentation;