Text-size auto resizing on div width

Question

I struggle with one problem. I have a div with a specific width and height (227px x 27px). Inside this div comes First and Last name, as a variable. Sometimes this name is small so there is a plenty of space in the div, but sometimes the name is long, and i need to resize the text that it could fit the div. I would like to also have max font size defined

my HTML code looks like this:

<div class="Basic-Text-Frame _idGenPageitem-6" id="fitin">
  <p class="Basic-Paragraph ParaOverride-1">
     <span class="CharOverride-2" ><?php echo $userdata->display_name;?></span>
  </p>
</div>

CSS:

div.Basic-Text-Frame {
 border-style:solid;
}
p.Basic-Paragraph {
  color:#000000;
  font-family:"Minion Pro", serif;
  font-size:12px;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  line-height:1.2;
  margin-bottom:0;
  margin-left:0;
  margin-right:0;
  margin-top:0;
  orphans:1;
  page-break-after:auto;
  page-break-before:auto;
  text-align:left;
  text-decoration:none;
  text-indent:0;
  text-transform:none;
  widows:1;
}
div._idGenPageitem-6 {
  height:27px;
  left:0px;
  overflow:hidden;
  position:absolute;
  top:0px;
  width:227px;
  z-index:0;
}
p.ParaOverride-1 {
  text-align:center;
}
span.CharOverride-2 {
  color:#5b9b98;
  font-family:Garamond, serif;
  font-size:x-large;
  font-style:normal;
  font-variant:small-caps;
  font-weight:normal;
  text-transform:none;
  max-height: 29px;
}

EDIT: i have tried resize font-size according to div size, and this suggested answer and flowType plugin and FitText plugin before and i coudnt make it, that is why i aksed the question.

my problem is that bigger text just goes in new row, and is not fitted accordingly to the this div box. So long text result is out of the div and could not been seen. As I put the span height "absolute" value, it always changes to "auto"

Here is the picture of the problem i am working on it is a intensification card

How to fix this problem?

Look at this http://stackoverflow.com/questions/13358181/resize-font-size-according-to-div-size — depperm, Jun 19 '15 at 14:22
Check this question http://stackoverflow.com/a/6112914/909535 — meteor, Jun 19 '15 at 14:35
Here's a jQuery plugin which may help. http://simplefocus.com/flowtype/ — Mick Redman, Jun 19 '15 at 14:52
Thank you all I have tried all of this solution before i asked the question, but non of these have worked out for me. I have edited the question with all the details i work with — Michael Presečan, Jun 19 '15 at 15:05

m69's been on strike for years · Accepted Answer · 2015-06-21T05:05:08.103

Run this function on page load to resize the text if necessary. The important thing in the css is white-space: nowrap which stops the text from wrapping onto a second line.
Don't forget to give the test span "d" the same font family, style and weight as the real text.

function fittext()
{
    var maxW = 227, maxH = 27, maxSize = 20;
    var c = document.getElementsByClassName("fitin");
    var d = document.createElement("span");
    d.style.fontSize = maxSize + "px";

    for (var i = 0; i < c.length; i++)
    {
        d.innerHTML = c[i].innerHTML;
        document.body.appendChild(d);
        var w = d.offsetWidth;
        var h = d.offsetHeight;
        document.body.removeChild(d);
        var x = w > maxW ? maxW / w : 1;
        var y = h > maxH ? maxH / h : 1;
        var r = Math.min(x, y) * maxSize;
        c[i].style.fontSize = r + "px";
    }
}

fittext();

DIV
{
    width: 227px;
    height: 27px;
    overflow: hidden;
    margin-bottom: 9px;
    background-color: silver;
}

P
{
    margin: 0px;
    color: black;
    font-size: 20px;
    text-align: center;
    white-space: nowrap;
}

<DIV>
    <P>
         <SPAN CLASS="fitin">Short Guy</SPAN>
    </P>
</DIV>
<DIV>
    <P>
         <SPAN CLASS="fitin">Just A Random Regular Person</SPAN>
    </P>
</DIV>
<DIV>
    <P>
         <SPAN CLASS="fitin">A Really Very Extraordinarily Long And Tall Woman</SPAN>
    </P>
</DIV>

Text-size auto resizing on div width

1 Answers1

Linked