Pure CSS to make font-size responsive based on dynamic amount of characters

Question

I know that this could be solved fairly easily with Javascript  but I m only interested in a pure CSS solution    I want a way to dynamically resize text so that it always fits into a fixed div  Here is the sample markup    x000D   x000D   lt div style  width  200px  height  1em  overflow  hidden   gt  x000D     lt p gt Some sample dynamic amount of text here lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    I was thinking that maybe this could be possible by specifying the width of the container in ems  and getting the font-size to inherit that value

User · Answer

You might be interested in the calc approach   font-size  calc 4vw   4vh   2vmin     done  Tweak values till matches your taste   Source  https   codepen io CrocoDillon pen fBJxu

User · Answer

For reference  a non-CSS solution   Below is some JS that re-sizes a font depending on the text length within a container   Codepen with slightly modified code  but same idea as below   function scaleFontSize element        var container   document getElementById element           Reset font-size to 100  to begin     container style fontSize    100            Check if the text is wider than its container         if so then reduce font-size     if  container scrollWidth  gt  container clientWidth            container style fontSize    70              For me  I call this function when a user makes a selection in a drop-down  and then a div in my menu gets populated  this is where I have dynamic text occurring        scaleFontSize  my container div      In addition  I also use CSS ellipses         to truncate yet even longer text too  like so    my container div       width  200px     width required for text-overflow to work        white-space  nowrap      overflow  hidden      text-overflow  ellipsis      So  ultimately    Short text  e g   APPLES   Fully rendered  nice big letters  Long text  e g   APPLES  amp  ORANGES   Gets scaled down 70   via the above JS scaling function  Super long text  e g   APPLES  amp  ORANGES  amp  BANAN      Gets scaled down 70  AND gets truncated with a       ellipses  via the above JS scaling function together with the CSS rule    You could also explore playing with CSS letter-spacing to make text narrower while keeping the same font size

User · Answer

Create a lookup table that computes font-size based on the length of the string inside your  lt div gt    const fontSizeLookupTable        gt         lookup table looks like     72px         32px         16px            let a            adjust this based on how many characters you expect in your  lt div gt    a length   32       adjust the following ranges empirically   a fill   72px             a fill   32px    4        a fill   16px    8           add more ranges as necessary   return a     const computeFontSize   stringLength   gt      const table   fontSizeLookupTable      return stringLength  lt  table length   table stringLength     16px       Adjust and tune all parameters by empirical test

User · Answer

I used smth like this  1 style fontSize   15 6  document getElementById  quot 2 quot   innerHTML length    vw  Where  1 - parent div Id  and 2 - Id of div with my text

User · Answer

Edit  Watch out for attr   Its related to calc   in css  You may be able to achieve it in future  Unfortunately for now there isn t a css only solution  This is what I suggest you do  To your element give a title attribute  And use text-overflow ellipsis to prevent breakage of the design and let user know more text is there   lt div style  quot width  200px  height  1em  text-overflow  ellipsis  quot  title  quot Some sample dynamic amount of text here quot  gt   Some sample dynamic amount of text here  lt  div gt          Alternatively  If you just want to reduce size based on the viewport  CSS3 supports  new dimensions that are relative to view port  body      font-size  3 2vw      3 2vw   3 2  of width of viewport 3 2vh   3 2  of height of viewport 3 2vmin   Smaller of 3 2vw or 3 2vh 3 2vmax   Bigger of 3 2vw or 3 2vh see css-tricks com      and also look at caniuse com

User · Answer

As many mentioned in comments to  DMTinter s post  the OP was asking about the number   amount   of characters changing   He was also asking about CSS  but as  Alexander indicated   it is not possible with only CSS    As far as I can tell  that seems to be true at this time  so it also seems logical that people would want to know the next best thing   I m not particularly proud of this  but it does work   Seems like an excessive amount of code to accomplish it   This is the core   function fitText el     var text   el text      var fsize   parseInt el css  font-size       var measured   measureText text  fsize      if  measured width  gt  el width         console log  reducing        while true         fsize   parseInt el css  font-size           var m   measureText text  fsize          if m width  gt  el width             el css  font-size   --fsize    px                  else          break                      else if  measured width  lt  el width         console log  increasing        while true         fsize   parseInt el css  font-size           var m   measureText text  fsize         if m width  lt  el width  -4      not sure why -4 is needed  often          el css  font-size     fsize    px                  else          break                        Here s a JS Bin  http   jsbin com pidavon edit html css js console output Please suggest possible improvements to it  I m not really interested in using canvas to measure the text   seems like too much overhead       Thanks to  Pete for measureText function  https   stackoverflow com a 4032497 442665

User · Answer

The only way would probably be to set different widths for different screen sizes  but this approach is pretty inacurate and you should use a js solution   h1       font-size  20px      media all and  max-device-width  720px       h1           font-size  18px            media all and  max-device-width  640px       h1           font-size  16px            media all and  max-device-width  320px       h1           font-size  12px

User · Answer

Try RFS  for responsive font size  library by MartijnCuppens that maybe will be implemented in Bootstrap

User · Answer

This solution might also help      document  ready function            window  resize function             if    window  width    lt  600                   body   css  font-size    2 8vw               else if    window  width    gt   600  amp  amp    window  width    lt  750                   body   css  font-size    2 4vw                           and so on     according to our needs            else if    window  width    gt   1200                   body   css  font-size    1 2vw                               It worked for me well

User · Answer

calc 42px    60 - 42     100vw - 768px     1440 - 768      use this equation   For anything larger or smaller than 1440 and 768  you can either give it a static value  or apply the same approach   The drawback with vw solution is that you cannot set a scale ratio  say a 5vw at screen resolution 1440 may ended up being 60px font-size  your idea font size  but when you shrink the window width down to 768  it may ended up being 12px  not the minimal you want  With this approach  you can set your upper boundary and lower boundary  and the font will scale itself in between

User · Answer

If doing from scratch in Bootstrap 4  Go to https   bootstrap build app Click Search Mode Search for  enable-responsive-font-sizes and turn it on  Click Export Theme to save your custom bootstrap CSS file

User · Answer

Note  This solution changes based on viewport size and not the amount of content I just found out that this is possible using VW units  They re the units associated with setting the viewport width  There are some drawbacks  such as lack of legacy browser support  but this is definitely something to seriously consider using  Plus you can still provide fallbacks for older browsers like so  p       font-size  30px      font-size  3 5vw     http   css-tricks com viewport-sized-typography  and https   medium com design-ux 66bddb327bb1

[css] Pure CSS to make font-size responsive based on dynamic amount of characters

Examples related to css