{"id":132,"date":"2016-10-14T18:30:40","date_gmt":"2016-10-14T18:30:40","guid":{"rendered":"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/?p=132"},"modified":"2017-01-25T19:44:06","modified_gmt":"2017-01-25T19:44:06","slug":"ie-11-word-wrap-word-break","status":"publish","type":"post","link":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/ie-11-word-wrap-word-break\/","title":{"rendered":"IE 11 – Word Wrap or Word Break not working for Long Word or Overflowing Text"},"content":{"rendered":"

IE 11 – Word Wrap or Word Break not working<\/h2>\r\n

If you are attempting to wrap very long words or hyperlinks within a narrow container, you may experience text overflowing when viewing your results in IE11. This may happen despite using the CSS declaration word-wrap: break-word;<\/span> in IE 11, but looks fine in other browsers. See below:<\/p>\r\n\r\n\"word\r\n\r\n

There are ways of handling long words and URLs using forced breaks, hyphenation, ellipsis, etc). See the terrific article here on the CSS Tricks website: https:\/\/css-tricks.com\/snippets\/css\/prevent-long-urls-from-breaking-out-of-container\/<\/a><\/p>\r\n\r\n

What if you do not want a hyphen or ellipsis to appear? Using word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; word-break: break-word;<\/span> or even the Microsoft CSS Browser Prefix declaration -ms-word-break: break-all;<\/span>, may not work. It didn’t for me.<\/p>\r\n\r\n

The solution, using the HTML, ZERO-WIDTH-SPACE Unicode Character &#8203;<\/span>.<\/p>\r\n\r\n

CSS<\/h4>\r\n
\r\n
\r\n#container { \r\n  width: 120px;\r\n  background-color:#ccc;\r\n  border: 1px solid #aaa;\r\n  margin: 50px 50px 0;\r\n}\r\n\r\n.break {\r\n  word-wrap: break-word;\r\n}\r\n<\/div>\r\n<\/pre>\r\n\r\n
HTML<\/h4>\r\n
\r\n
\r\n<div id="container">\r\n  <p>Donec sit amet erat porta, rhoncus dolor nec, <span class="break">scelerisqueaghtr&#8203;<\/b>afdssf<\/span> accumsan leo. Phasellus eu ipsum aliquam, <a class="break" href="www.samplewebsite.com\/reallylongurl">www.reallylong&#8203;<\/b>websiteurl&#8203;<\/b>.com\/reallylongurl<\/a> rutrum orci a, pulvinar elit. Aenean auctor dignissim tempus.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/pre>\r\n\r\n
You have to insert the unicode character whereever you want the breaks to occur. See the final result below.<\/p>\r\n\r\n\"word","protected":false},"excerpt":{"rendered":"IE 11 – Word Wrap or Word Break not working If you are attempting to wrap very long words or hyperlinks within a narrow container, you may experience text overflowing when viewing your results in IE11. This may happen despite using the CSS declaration word-wrap: break-word; in IE 11, but looks fine in other browsers. […]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[5,18],"tags":[],"yoast_head":"\nIE 11 - Word Wrap or Word Break not working<\/title>\n<meta name=\"description\" content=\"Learn how to force a break for long words or URL's in IE 11 when Word Wrap or Word Break using the HTML Zero-Width-Space Unicode Character.\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"IE 11 - Word Wrap or Word Break not working\" \/>\n<meta property=\"og:description\" content=\"Learn how to force a break for long words or URL's in IE 11 when Word Wrap or Word Break using the HTML Zero-Width-Space Unicode Character.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/ie-11-word-wrap-word-break\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development Reference\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-14T18:30:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-01-25T19:44:06+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/10\/word-wrap_IE11.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"1 minute\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Web Development Reference\",\"description\":\"Web Development Solutions Explained -- Easy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/ie-11-word-wrap-word-break\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/10\/word-wrap_IE11.jpg\",\"contentUrl\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/10\/word-wrap_IE11.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/ie-11-word-wrap-word-break\/#webpage\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/ie-11-word-wrap-word-break\/\",\"name\":\"IE 11 - Word Wrap or Word Break not working\",\"isPartOf\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/ie-11-word-wrap-word-break\/#primaryimage\"},\"datePublished\":\"2016-10-14T18:30:40+00:00\",\"dateModified\":\"2017-01-25T19:44:06+00:00\",\"author\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\"},\"description\":\"Learn how to force a break for long words or URL's in IE 11 when Word Wrap or Word Break using the HTML Zero-Width-Space Unicode Character.\",\"breadcrumb\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/ie-11-word-wrap-word-break\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/ie-11-word-wrap-word-break\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/ie-11-word-wrap-word-break\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/ie-11-word-wrap-word-break\/\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/ie-11-word-wrap-word-break\/\",\"name\":\"IE 11 – Word Wrap or Word Break not working for Long Word or Overflowing Text\"}}]},{\"@type\":\"Person\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7o7aF-28","_links":{"self":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/132"}],"collection":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/comments?post=132"}],"version-history":[{"count":4,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/132\/revisions"}],"predecessor-version":[{"id":191,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/132\/revisions\/191"}],"wp:attachment":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/media?parent=132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/categories?post=132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/tags?post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}