{"id":250100,"date":"2017-01-17T17:17:53","date_gmt":"2017-01-18T00:17:53","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=250100"},"modified":"2022-09-28T10:16:55","modified_gmt":"2022-09-28T17:16:55","slug":"overflow-wrap","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow-wrap\/","title":{"rendered":"overflow-wrap"},"content":{"rendered":"\n<p>The <code>overflow-wrap<\/code> property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.<\/p>\n\n\n\n<!--more-->\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.example {\n  overflow-wrap: break-word;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">overflow-wrap = \n  normal      |\n  break-word  |\n  anywhere    <\/code><\/pre>\n\n\n\n<ul class=\"is-style-almanac-list\"><li><strong>Initial value:<\/strong> <code>normal<\/code><\/li><li><strong>Applies to:<\/strong> non-replaced inline elements<\/li><li><strong>Inherited:<\/strong> yes<\/li><li><strong>Computed value:<\/strong> as specified<\/li><li><strong>Animation type:<\/strong> discrete<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<ul><li><strong><code>normal<\/code>:<\/strong> the default. The browser will break lines according to normal line breaking rules. Words or unbroken strings will not break, even if they overflow the container.<\/li><li><strong><code>break-word<\/code>:<\/strong> words or strings of characters that are too large to fit inside their container will break in an arbitrary place to force a line break. A hyphen character will not be inserted, even if the <code>hyphens<\/code> property is used.<\/li><li><strong><code>inherit<\/code>:<\/strong> the targeted element must inherit the value of the <code>overflow-wrap<\/code> property defined on its immediate parent.<\/li><\/ul>\n\n\n\n<p>The demo below has a toggle button that allows you to switch between <code>normal<\/code> and <code>break-word<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZLBvav\" src=\"\/\/codepen.io\/anon\/embed\/ZLBvav?height=450&amp;theme-id=1&amp;slug-hash=ZLBvav&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZLBvav\" title=\"CodePen Embed ZLBvav\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>To demonstrate the problem that <code>overflow-wrap<\/code> attempts to solve, the demo uses <a href=\"https:\/\/en.wikipedia.org\/wiki\/Pneumonoultramicroscopicsilicovolcanoconiosis\" rel=\"noopener\">an unusually long word<\/a> inside a relatively small container. When you toggle <code>break-word<\/code> on, the word is broken to accommodate the small amount of space available, as if the word were multiple words.<\/p>\n\n\n\n<p>A string of non-breaking space characters (<code>&nbsp;<\/code>) would be treated the same way and would also break at an appropriate spot.<\/p>\n\n\n\n<p><code>overflow-wrap<\/code> is useful when applied to elements that contain unmoderated user-generated content (like comments sections). This can prevent long URLs and other unbroken strings of text (e.g. vandalism) from breaking a web page\u2019s layout.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"similarities-to-the-word-break-property\">Similarities to the <code>word-break<\/code> property<\/h3>\n\n\n<p><code>overflow-wrap<\/code> and <code>word-break<\/code> behave very similarly and can be used to solve similar problems. A basic summary of the difference, as explained in the CSS specification is:<\/p>\n\n\n\n<ul><li><code>overflow-wrap<\/code> is generally used to avoid problems with long strings causing broken layouts due to text flowing outside a container.<\/li><li><code>word-break<\/code> specifies soft wrap opportunities between letters commonly associated with languages like Chinese, Japanese, and Korean (CJK).<\/li><\/ul>\n\n\n\n<p>After describing examples of how <code>word-break<\/code> can be used in CJK content, the spec says: &#8220;To enable additional break opportunities only in the case of overflow, see <code>overflow-wrap<\/code>&#8220;.<\/p>\n\n\n\n<p>From this, we can surmise that <code>word-break<\/code> is best used with non-English content that requires specific word-breaking rules, and that might be interspersed with English content, while <code>overflow-wrap<\/code> should be used to avoid broken layouts due to long strings, regardless of the language used.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-historical-word-wrap-property\">The historical <code>word-wrap<\/code> property<\/h3>\n\n\n<p><code>overflow-wrap<\/code> is the standard name for its predecessor, the <code>word-wrap<\/code> property. <code>word-wrap<\/code> was originally a proprietary Internet Explorer-only feature that was eventually supported in all browsers despite not being a standard.<\/p>\n\n\n\n<p><code>word-wrap<\/code> accepts the same values as <code>overflow-wrap<\/code> and behaves the same way. According to the spec, browsers &#8220;must treat <code>word-wrap<\/code> as an alternate name for the <code>overflow-wrap<\/code> property, as if it were a shorthand of <code>overflow-wrap<\/code>&#8220;. Also, all user agents are required to support <code>word-wrap<\/code>indefinitely, for legacy reasons.<\/p>\n\n\n\n<p>Both <code>overflow-wrap<\/code> and <code>word-wrap<\/code> will pass <a href=\"https:\/\/jigsaw.w3.org\/css-validator\/\" rel=\"noopener\">CSS validation<\/a> as long as the validator is set to test against CSS3 or higher (currently the default).<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=wordwrap\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">23<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">49<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"IE - \"><span class=\"caniuse-agents-version version\">11<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">18<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">6.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">4.4<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">7.0-7.1<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/drafts.csswg.org\/css-text-3\/#overflow-wrap-property\" rel=\"noopener\">CSS Text Module Level 3 Specification<\/a> (W3C)<\/li><li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/prevent-long-urls-from-breaking-out-of-container\/\">Handling Long Words and URLs<\/a> (CSS-Tricks)<\/li><li><a href=\"https:\/\/www.impressivewebs.com\/word-wrap-css3\/\" rel=\"noopener\">Word-Wrap: A CSS3 Property That Works in Every Browser<\/a> (Louis Lazaris)<\/li><li><a href=\"http:\/\/stackoverflow.com\/questions\/1795109\/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break\/\" rel=\"noopener\"><code>word-break<\/code> vs. <code>overflow-wrap<\/code><\/a> (Stack Overflow)<\/li><li><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/css-prevent-line-break?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_bestsellers\" rel=\"noopener\">How to Prevent Line Breaks Using CSS<\/a> (DigitalOcean)<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.<\/p>\n","protected":false},"author":7178,"featured_media":0,"parent":13939,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1055,1056],"acf":[],"jetpack-related-posts":[{"id":16145,"url":"https:\/\/css-tricks.com\/snippets\/css\/prevent-long-urls-from-breaking-out-of-container\/","url_meta":{"origin":250100,"position":0},"title":"Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)","date":"January 30, 2012","format":false,"excerpt":"There are times when a really long string of text can overflow the container of a layout. For example: URL's don't typically have spaces in them, so they are often culprits. Here's a big snippet with all the CSS players involved: .dont-break-out { \/* These are technically the same, but\u2026","rel":"","context":"In \"overflow\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/01\/fixed.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4352,"url":"https:\/\/css-tricks.com\/snippets\/css\/make-pre-text-wrap\/","url_meta":{"origin":250100,"position":1},"title":"Make &#8220;Pre&#8221; Text Wrap","date":"October 6, 2009","format":false,"excerpt":"Text in <pre> tags doesn't wrap by default. For example, see the code snippet below! If this is causing layout problems, one solution is to give the pre block an overflow property to hide the excess or cause it to scroll. The other solution is to have it wrap. \/*\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14119,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-overflow\/","url_meta":{"origin":250100,"position":2},"title":"text-overflow","date":"September 6, 2011","format":false,"excerpt":"The text-overflow property in CSS deals with situations where text is clipped when it overflows the element's box. It can be clipped (i.e. cut off, hidden), display an ellipsis ('\u2026', Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings). .ellipsis { text-overflow: ellipsis;\u2026","rel":"","context":"With 18 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3482,"url":"https:\/\/css-tricks.com\/snippets\/css\/accessibilityseo-friendly-css-hiding\/","url_meta":{"origin":250100,"position":3},"title":"Accessibility\/SEO Friendly CSS Hiding","date":"August 21, 2009","format":false,"excerpt":".screen-reader-text { position: absolute; top: -9999px; left: -9999px; } This class can remove an item from the page, taking it out of flow and doesn't cause overflow scrolling. It's better than display: none; or even visibility: hidden; when the goal is to hide the element visually but leave it accessible\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14081,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow\/","url_meta":{"origin":250100,"position":4},"title":"overflow","date":"September 5, 2011","format":false,"excerpt":"The overflow property controls what happens to content that breaks outside of its bounds: imagine a div in which you've explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be visible by default. Whereas if you\u2026","rel":"","context":"In \"overflow\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/overflow-visible.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":17958,"url":"https:\/\/css-tricks.com\/almanac\/properties\/w\/word-break\/","url_meta":{"origin":250100,"position":5},"title":"word-break","date":"September 4, 2012","format":false,"excerpt":"The word-break property in CSS can be used to change when line breaks ought to occur. Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen. In the example below we can make the word-break between letters instead: .element {\u2026","rel":"","context":"In \"word-break\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/250100"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/7178"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=250100"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/250100\/revisions"}],"predecessor-version":[{"id":373898,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/250100\/revisions\/373898"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13939"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=250100"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=250100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}