{"id":17958,"date":"2012-09-04T15:13:24","date_gmt":"2012-09-04T22:13:24","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=17958"},"modified":"2021-07-12T14:38:44","modified_gmt":"2021-07-12T21:38:44","slug":"word-break","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/w\/word-break\/","title":{"rendered":"word-break"},"content":{"rendered":"<p>The <code>word-break<\/code> 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.<\/p>\n<p><!--more--><\/p>\n<p>In the example below we can make the <code>word-break<\/code> between letters instead:<\/p>\n<pre><code class=\"language-css\">.element {\n  word-break: break-all;\n}<\/code><\/pre>\n<p>If we then set the width of the text to one <code>em<\/code>, the word will break by each letter:<\/p>\n<p class=\"codepen\" data-height=\"468\" style=\"height: 468px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"EVeVyo\" data-default-tab=\"result\" data-user=\"css-tricks\">See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/EVeVyo\/\" rel=\"noopener\">Setting text vertically with word-break<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>This value is often used in places with user generated content so that long strings don&#8217;t risk breaking the layout. One very common example is a long copy and pasted URL. If that URL has no hyphens, it can extend beyond the parent box and look bad or worse, cause layout problems.<\/p>\n<p class=\"codepen\" data-height=\"268\" style=\"height: 268px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"avavBY\" data-default-tab=\"result\" data-user=\"css-tricks\">See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/avavBY\/\" rel=\"noopener\">Fixing links with word-break<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Values<\/h3>\n<ul>\n<li><code>normal<\/code>: use the default rules for word breaking.<\/li>\n<li><code>break-all<\/code>: any word\/letter can break onto the next line.<\/li>\n<li><code>keep-all<\/code>: for Chinese, Japanese and Korean text words are not broken. Otherwise this is the same as <code>normal<\/code>.<\/li>\n<\/ul>\n<p>This property is also often used in conjunction with the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/h\/hyphenate\/\">hyphens<\/a> property so that when breaks occur a hypen is inserted, as per the standard in books.<\/p>\n<p>The full usage, with needed vendor prefixes, is:<\/p>\n<pre><code class=\"language-css\"> -ms-word-break: break-all;\n     word-break: break-all;\n\n     \/* Non standard for WebKit *\/\n     word-break: break-word;\n\n-webkit-hyphens: auto;\n   -moz-hyphens: auto;\n        hyphens: auto;<\/code><\/pre>\n<p>Using these properties on the universal selector can be useful if you have a site with a lot of user-generated content. Although fair warning, it can look weird on titles and pre-formatted text (<code><\/code><\/p>\n<p><code><\/code><\/p>\n<pre><code><\/code>).<\/pre>\n<h3 id=\"related\">Related<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow-wrap\/\">overflow-wrap<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/h\/hyphenate\/\">hyphens<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/whitespace\/\">white-space<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/prevent-long-urls-from-breaking-out-of-container\/\">Handling Long Words and URLs<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\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<p>Safari and iOS support the <code>break-all<\/code> value but not <code>keep-all<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13955,"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":[1057,1056],"acf":[],"jetpack-related-posts":[{"id":325124,"url":"https:\/\/css-tricks.com\/almanac\/properties\/l\/line-break\/","url_meta":{"origin":17958,"position":0},"title":"line-break","date":"November 6, 2020","format":false,"excerpt":"The CSS line-break property defines how strictly to enforce rules for wrapping text wrapping on new lines, particularly when working with symbols and punctuations in Chinese, Japanese or Korean (CJK) writing systems. It is included in the CSS Text Module Level 3 specification, which is currently in Editor's Draft. .element\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198601,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-skip\/","url_meta":{"origin":17958,"position":1},"title":"text-decoration-skip","date":"March 31, 2015","format":false,"excerpt":"The text-decoration-skip property specifies where a text underline, overline, or strike-through should break. This improves legibility of decorated text and corrects punctuation grammar for some languages. Here's one example: a { text-decoration-skip: ink; } Heads up! The ink value has been changed to an entirely new property, text-decoration-skip-ink: auto;. If\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":366362,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-before\/","url_meta":{"origin":17958,"position":2},"title":"break-before","date":"June 13, 2022","format":false,"excerpt":"The CSS break-before property is neat in that it allows, forces, or prevents breaks in paged media, multi-column layouts, and regions. When applying the property to an element, what we're doing is providing an instruction for whether to break or prevent breaks between pages, columns, and regions. Note: break-before is\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":366427,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-after\/","url_meta":{"origin":17958,"position":3},"title":"break-after","date":"June 13, 2022","format":false,"excerpt":"The CSS break-after property is neat in that it allows, forces, or prevents breaks in paged media, multi-column layouts, and regions. When applying the property to an element, what we're doing is providing an instruction for whether to break or prevent breaks between pages, columns, and regions. Note: break-after is\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":196786,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-align-last\/","url_meta":{"origin":17958,"position":4},"title":"text-align-last","date":"February 26, 2015","format":false,"excerpt":"text-align-last lets you control the alignment of the last (or only) line of text right before a forced line break \u2014 for example the end of a paragraph or the line right before a tag. .intro-graph { text-align-last: center; } At the time of this writing, only Mozilla browsers and\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16145,"url":"https:\/\/css-tricks.com\/snippets\/css\/prevent-long-urls-from-breaking-out-of-container\/","url_meta":{"origin":17958,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17958"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17958"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17958\/revisions"}],"predecessor-version":[{"id":344528,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17958\/revisions\/344528"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13955"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17958"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}