文字大小自动调整div宽度

-2

我为一个问题而奋斗。我有一个具有特定宽度和高度的div（227px x 27px）。在这个div里面是First and Last name，作为一个变量。有时候这个名字很小，所以div中有足够的空间，但是有时名字很长，我需要调整文本的大小以适应div。我想也有最大的字体大小定义文字大小自动调整div宽度

我的HTML代码如下所示：

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

编辑：我曾尝试resize font-size according to div size和this suggested answer和flowType plugin和FitText plugin之前和我coudnt做到这一点，这就是为什么我提出了这个问题。

我的问题是，较大的文本只是在新的一行，并没有相应地适合这个div盒。如此长的文本结果不在格子里，也看不到。当我把跨度高度“绝对”值，它总是更改为“自动”

这里是我的 it is a intensification card

如何解决这个问题，工作问题了吗？

来源

2015-06-19 Michael Presečan

请提供代码。 – nicael

看看这个http://stackoverflow.com/questions/13358181/resize-font-size-according-to-div-size – depperm

检查这个问题http://stackoverflow.com/a/6112914/909535 – prem89

在页面加载中运行此功能以根据需要调整文本大小。在css中重要的是white-space: nowrap，它停止将文本包装到第二行。
不要忘记给测试跨度“d”设置与真实文本相同的字体系列，样式和重量。

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>

来源

2015-06-21 02:51:41 m69

文字大小自动调整div宽度

回答

相关问题