{"id":14059,"date":"2011-09-05T20:45:49","date_gmt":"2011-09-06T03:45:49","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14059"},"modified":"2022-07-18T08:48:52","modified_gmt":"2022-07-18T15:48:52","slug":"hyphenate","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/h\/hyphenate\/","title":{"rendered":"hyphens"},"content":{"rendered":"\n<p>The <code>hyphens<\/code> property controls hyphenation of text in block level elements. You can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present.<\/p>\n\n\n\n<p>Note that <code>hyphens<\/code> is language-sensitive. Its ability to find break opportunities depends on the language, defined in the <code>lang<\/code> attribute of a parent element. Not all languages are supported yet, and support depends on the specific browser.<\/p>\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\">.element {\n  hyphens: none | manual | auto\n}<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"hyphens-none\"><code>hyphens: none<\/code><\/h4>\n\n\n<p>Words are never hyphenated at line breaks, even if characters inside the word suggest where hyphenation could or should go.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"hyphens-manual\"><code>hyphens: manual<\/code><\/h4>\n\n\n<p>Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. There are two characters that suggest line break opportunity:<\/p>\n\n\n\n<ul><li><code>U+2010<\/code> (HYPHEN): the &#8220;hard&#8221; hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered. Literally a &#8220;-&#8220;.<\/li><li><code>U+00AD<\/code> (SHY): an invisible, &#8220;soft&#8221; hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use <code>&amp;shy<\/code> to insert a soft hyphen.<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"hyphens-auto\"><code>hyphens: auto<\/code><\/h4>\n\n\n<p>Words can be broken at appropriate hyphenation points either as determined by hyphenation characters (see above) inside the word or as determined automatically by a language-appropriate hyphenation resource (if supported by the browser or provided via <code>@hyphenation-resource<\/code>).<\/p>\n\n\n\n<p>Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation points within the word.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"hyphens-all\"><code>hyphens: all<\/code><\/h4>\n\n\n<p><strong>Deprecated, do not use<\/strong>. This was only in the spec temporarily for testing.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<p>The demo below has a bunch of paragraphs and everything is set to <code>hyphens: auto;<\/code> to demonstrate the concept of hyphenation. The <code>lang<\/code> attribute is set to <code>en<\/code> on the parent element.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_3983209536be8ee1fde113ab7a00473e\" src=\"\/\/codepen.io\/anon\/embed\/3983209536be8ee1fde113ab7a00473e?height=450&amp;theme-id=1&amp;slug-hash=3983209536be8ee1fde113ab7a00473e&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 3983209536be8ee1fde113ab7a00473e\" title=\"CodePen Embed 3983209536be8ee1fde113ab7a00473e\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\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=css-hyphens\" 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\">88<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">6*<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">10*<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12*<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">5.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\">123<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">4.2-4.3*<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n\n<p>Safari 5+ requires <code>-webkit-<\/code>, Firefox 6+ requires <code>-moz-<\/code>, IE 10+ requires <code>-ms-<\/code>, iOS 4.2+ requires <code>-webkit-<\/code>.<\/p>\n\n\n\n<p>Chrome &lt; 55 and Android browser actually support <code>-webkit-hyphens: none<\/code>, which is the default value, but none of the other values.<\/p>\n\n\n\n<p>In Firefox and Internet Explorer, automatic hyphenation only works for some languages (defined with the <code>lang<\/code> attribute). See <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/hyphens?redirectlocale=en-US&amp;redirectslug=CSS%2Fhyphens#browser_compatibility\" rel=\"noopener\">this note<\/a> for a comprehensive list of supported languages.<\/p>\n\n\n\n<p>If you are writing a web-based document that really need hyphenation, you can use <a href=\"https:\/\/code.google.com\/p\/hyphenator\/\" rel=\"noopener\">Hyphenator.js<\/a> which is a library based on a vast dictionary that will automatically inject soft hyphens and zero-width spaces into your content.<\/p>\n\n\n\n<p>Without JavaScript, you&#8217;ll have to rely on both <code>hyphens<\/code> and <code>word-wrap<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.hyphenate {\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n\n-webkit-hyphens: auto;\n   -moz-hyphens: auto;\n        hyphens: auto;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"http:\/\/www.w3.org\/TR\/2011\/WD-css3-text-20110412\/#hyphens\" rel=\"noopener\">hyphens in the spec<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/docs\/CSS\/hyphens\" rel=\"noopener\">hyphens at MDN<\/a><\/li><li><a href=\"http:\/\/blog.kenneth.io\/blog\/2012\/03\/04\/word-wrapping-hypernation-using-css\/\" rel=\"noopener\">Word wrapping\/hyphenation using CSS<\/a> by Kenneth Auchenberg<\/li><li><a href=\"http:\/\/davidnewton.ca\/the-current-state-of-hyphenation-on-the-web\" rel=\"noopener\">The &#8220;current&#8221; state of hyphenation on the web<\/a> by David Newton<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The hyphens property controls hyphenation of text in block level elements. You can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present. Note that hyphens is language-sensitive. Its ability to find break opportunities depends on the language, defined in the lang attribute of a parent element. Not [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13925,"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":[],"acf":[],"jetpack-related-posts":[{"id":344521,"url":"https:\/\/css-tricks.com\/almanac\/properties\/h\/hyphenate-limit-chars\/","url_meta":{"origin":14059,"position":0},"title":"hyphenate-limit-chars","date":"July 15, 2021","format":false,"excerpt":"The hyphenate-limit-chars property in CSS tells the browser how many characters a word should be before it's hyphenated, as well as the minimum number of characters before and after the hyphen. This way, we can avoid awkward hyphenations, giving us an extra degree of control when it comes to how\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/hyphenate.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":16145,"url":"https:\/\/css-tricks.com\/snippets\/css\/prevent-long-urls-from-breaking-out-of-container\/","url_meta":{"origin":14059,"position":1},"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":17958,"url":"https:\/\/css-tricks.com\/almanac\/properties\/w\/word-break\/","url_meta":{"origin":14059,"position":2},"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":[]},{"id":4644,"url":"https:\/\/css-tricks.com\/snippets\/php\/create-url-slug-from-post-title\/","url_meta":{"origin":14059,"position":3},"title":"Create URL Slug from Post Title","date":"November 6, 2009","format":false,"excerpt":"Regular expression function that replaces spaces between words with hyphens.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":250100,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow-wrap\/","url_meta":{"origin":14059,"position":4},"title":"overflow-wrap","date":"January 17, 2017","format":false,"excerpt":"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. .example { overflow-wrap: break-word;\u2026","rel":"","context":"In \"overflow-wrap\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":764,"url":"https:\/\/css-tricks.com\/polls\/","url_meta":{"origin":14059,"position":5},"title":"Polls","date":"May 9, 2008","format":false,"excerpt":"We've deactivated our Polls plugin as we just weren't using it much anymore and it's been years since we've ran a poll in any capacity. The \"Results Wrapup Posts\" have the question & data from the poll anyway, so hopefully no significant data loss here. Rate Your CSS Skill Level\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/03\/new-poll-career.thumbnail.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14059"}],"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\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14059"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14059\/revisions"}],"predecessor-version":[{"id":367044,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14059\/revisions\/367044"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13925"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14059"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}