{"id":1470,"date":"2015-03-12T09:44:38","date_gmt":"2015-03-12T08:44:38","guid":{"rendered":"http:\/\/blog.kodono.info\/wordpress\/?p=1470"},"modified":"2015-03-26T18:31:05","modified_gmt":"2015-03-26T17:31:05","slug":"autosize-a-text-to-fit-into-a-div-in-purenative-javascript","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2015\/03\/12\/autosize-a-text-to-fit-into-a-div-in-purenative-javascript\/","title":{"rendered":"Autosize a text to fit into a div in pure\/native JavaScript"},"content":{"rendered":"<p>I was looking for a very tiny and light solution to fit a text inside a box. The box&#8217; height and width are fixed. I only found some great solutions like <a href=\"https:\/\/github.com\/zachleat\/BigText\">BigText<\/a> but I didn&#8217;t want to have jQuery loaded.<\/p>\n<p>Finally I found some code on StackOverflow and also at <a href=\"https:\/\/coderwall.com\/p\/_8jxgw\/autoresize-text-to-fit-into-a-div-width-height\">Coderwall<\/a>. I created my own solution that could only work with my own HTML code&#8230; but I share it here, maybe that could help someone else.<\/p>\n<p>The HTML code:<\/p>\n<pre class=\"brush:html\">\r\n  <div class=\"ribbon-front\">\r\n    <span>This is my text !<\/span>\r\n  <\/div>\r\n<\/pre>\n<p>The related CSS code:<\/p>\n<pre class=\"brush:css\">\r\n.ribbon-front { overflow:hidden }\r\n<\/pre>\n<p>And the JavaScript code:<\/p>\n<pre class=\"brush:javascript\">\r\nvar autoSizeText = function(selector) {\r\n  \"use strict\";\r\n  var el, elements, i, len, style, fontSize, IEoffsetHeight;\r\n  elements = document.querySelectorAll(selector);\r\n  if (elements.length &lt;= 0) return;\r\n  \r\n  for (i=0, len = elements.length; i &lt; len; i++) {\r\n    el = elements[i];\r\n\r\n    \/\/ we start from 0px and we grow by 0.5 until the content is too large\r\n    fontSize=0;\r\n    el.style.fontSize = \"0px\";\r\n    \/\/ fix for all IE : I cache the offsetHeight, and if it becomes really bigger than the previous value, then we stop!\r\n    IEoffsetHeight = el.offsetHeight;\r\n    \/\/ check if our content is out its box\r\n    while (el.scrollHeight===0 || el.scrollHeight >= el.offsetHeight) {\r\n      fontSize += 0.5;\r\n      el.style.fontSize = fontSize + 'px';\r\n\r\n      if (el.offsetHeight - IEoffsetHeight > 10) break;\r\n      IEoffsetHeight = el.offsetHeight;\r\n    }\r\n    el.style.fontSize = (fontSize - 0.5) + 'px';\r\n  }\r\n};\r\nautoSizeText('.ribbon-front > span');\r\n<\/pre>\n<p>It works for IE8-IE10 and with all modern browsers.<\/p>\n<p>You can see a demo at <a href=\"http:\/\/codepen.io\/Aymkdn\/pen\/jEeaPV\">codepen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was looking for a very tiny and light solution to fit a text inside a box. The box&#8217; height and width are fixed. I only found some great solutions like BigText but I didn&#8217;t want to have jQuery loaded. Finally I found some code on StackOverflow and also at Coderwall. I created my own [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[15,13,33,26],"tags":[30,24,152,158,157],"class_list":["post-1470","post","type-post","status-publish","format-standard","hentry","category-astuce","category-niveau-intermediaire","category-programmation","category-web-design","tag-css","tag-javascript","tag-niveau-intermediaire","tag-programmation","tag-web-design"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=1470"}],"version-history":[{"count":7,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1470\/revisions"}],"predecessor-version":[{"id":1488,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1470\/revisions\/1488"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=1470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=1470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=1470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}