div宽度上的文字大小自动调整大小 [英] Text-size auto resizing on div width

问题描述

我遇到一个问题。我有一个具有特定宽度和高度的div（227px x 27px）。在这个div里面有First和Last name，作为一个变量。有时这个名字很小，所以在div中有很多空间，但有时名称很长，我需要调整它可以适合div的文本大小。我也想要定义最大字体大小

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

我的HTML代码看起来像这样：

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;
}

编辑：我试过根据div大小调整字体大小，此建议答案和 flowType plugin 和 FitText插件之前和之后coudnt make it，这就是为什么我问的问题。

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.

我的问题是，更大的文本只是在新行，并不适合这个div框。所以长文本结果是出于div，不能被看到。因为我把跨度高度的绝对值，它总是改变为自动

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

如何解决这个问题？

推荐答案

在页面加载时运行此函数以调整文本大小（如有必要）。 css中的重要事情是 white-space：nowrap ，它会阻止文本换行到第二行。

不要忘记给测试范围d与真实文字相同的字体族，风格和重量。

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>

这篇关于div宽度上的文字大小自动调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！