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

问题描述

我在一个问题上挣扎.我有一个具有特定宽度和高度 (227px x 27px) 的 div.在这个 div 中，名字和姓氏是一个变量.有时这个名称很小，所以 div 中有足够的空间，但有时名称很长，我需要调整文本的大小以适合 div.我还想定义最大字体大小

我的 HTML 代码如下所示:

<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-2" ><?php echo $userdata->display_name;?></span></p>

CSS:

div.Basic-Text-Frame {边框样式:实心；}p.Basic-Paragraph {颜色:#000000；font-family:"Minion Pro", serif;字体大小:12px；字体样式:正常；字体变体:正常；字体粗细:正常；行高:1.2；保证金底部:0;左边距:0;边距右:0;边距顶部:0;孤儿:1；分页后:自动；分页前:自动；文本对齐:左；文字装饰:无；文本缩进:0;文本转换:无；寡妇:1；}div._idGenPageitem-6 {高度:27px；左:0像素；溢出:隐藏；位置:绝对；顶部:0像素；宽度:227px；z-索引:0；}p.ParaOverride-1 {文字对齐:居中；}span.CharOverride-2 {颜色:#5b9b98；字体系列:Garamond，衬线；字体大小:x-大；字体样式:正常；字体变体:小型大写字母；字体粗细:正常；文本转换:无；最大高度:29px；}

我试过 根据 div 大小调整字体大小，以及这个建议的答案 和 flowType 插件 和 FitText 插件 之前我没有成功，这就是我提出这个问题的原因.

我的问题是较大的文本只是进入新行，并且不适合此 div 框.如此长的文本结果超出了 div 并且无法看到.当我将跨度高度设置为绝对"值时，它总是更改为自动"

这是我正在处理的问题的图片

如何解决这个问题?

解决方案

在页面加载时运行此功能以在必要时调整文本大小.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 >最大W ?最大W/w : 1;var y = h >最大 H ?maxH/h : 1;var r = Math.min(x, y) * maxSize;c[i].style.fontSize = r + "px";}}fittext();

DIV{宽度:227px；高度:27px；溢出:隐藏；底边距:9px；背景颜色:银色；}磷{边距:0px；颜色:黑色;字体大小:20px；文本对齐:居中；空白:nowrap；}

<P><SPAN CLASS="fitin">矮个子</SPAN></P></DIV><DIV><P><SPAN CLASS="fitin">只是一个随机的普通人</SPAN></P></DIV><DIV><P><SPAN CLASS="fitin">一个非常特别的长而高的女人</SPAN></P></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

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

How to fix this problem?

解决方案

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屋！