Question

我有一个width: 200px的div，我在其中动态添加文本，我希望文本适合这个div，但文本已经出来了。我试图在字符数上改变字体大小，但它并不适用于所有情况，例如，如果字符串包含宽度更大的字符，如 W 或 M ，则文字变为在div之外。以下是我的代码

if(cs >= 1 && cs <= 4) {
 if(this.engravingFontCaseSenstiveOptions(cText) == "Lower")
    {
        $('#overlay_image_text').css({'margin-top':'-162px'});
        $('#overlay_image_text').css({'font-size':60+'px'});
    }else if(this.engravingFontCaseSenstiveOptions(cText) == "Upper")
    {
        $('#overlay_image_text').css({'margin-top':'-154px'});
        $('#overlay_image_text').css({'font-size':48+'px'});
        $('#overlay_image_text').css({'margin-left':'0px'});
    }else
    {
        $('#overlay_image_text').css({'margin-top':'-162px'});
        $('#overlay_image_text').css({'font-size':60+'px'});
        $('#overlay_image_text').css({'margin-left':'0px'});
    }
 }
 else if(cs == 5) {
   if(this.engravingFontCaseSenstiveOptions(cText) == "Lower")
    {
        $('#overlay_image_text').css({'margin-top':'-152px'});
        $('#overlay_image_text').css({'font-size':54+'px'});
        $('#overlay_image_text').css({'margin-left':'0px'});
    }else if(this.engravingFontCaseSenstiveOptions(cText) == "Upper")
    {
        $('#overlay_image_text').css({'margin-top':'-143px'});
        $('#overlay_image_text').css({'font-size':45+'px'});
        $('#overlay_image_text').css({'margin-left':'0px'});
    }else
    {
        $('#overlay_image_text').css({'margin-top':'-143px'});
        $('#overlay_image_text').css({'font-size':45+'px'});
        $('#overlay_image_text').css({'margin-left':'0px'});
    }
}

Answer 1

这样做，你在哪里测量文字大小

进行了一次小更新，其中min字体大小作为参数传递

function getStyle(elem,prop) {
  return window.getComputedStyle(elem,null).getPropertyValue(prop);
}
function setFontSize(elem,minsize) {
  var tst = document.createElement('div');
  tst.textContent = elem.textContent;
  tst.style = 'position:absolute;left:-9999px;display:inline-block;';
  document.body.appendChild(tst);
  tst.style.fontSize = minsize + 'px';
  tst.style.fontWeight = getStyle(elem,'font-weight');
  tst.style.fontFamily = getStyle(elem,'font-family').split(',')[0];
  while (minsize < 1000) {      
    if (parseInt(getStyle(tst,'width')) > 200) {
      elem.style.fontSize = (minsize - 2) + 'px';
      break;
    }
    tst.style.fontSize = minsize++ + 'px';
  }
  document.body.removeChild(tst);
}

setFontSize(document.querySelector('.sizedtext'),5);

.sizedtext {
  width: 200px;
  border: 1px solid;
  font-size: 15px;
  font-weight: normal;
  font-family: Arial;
}

<div class="sizedtext">WWWWWWWWWWWWWWWWWWWWW</div>

Answer 2

您可以切换以下课程：

.myFitClass {
    overflow: inherit;
    text-overflow: inherit;
    white-space: normal;
    text-align: justify;
}

这将是：

$(element).addClass('myFitClass');
//         ^^^ -> also `removeClass` or even `toggleClass`

希望它有所帮助。

Answer 3

您可以进一步优化代码，重复大量语法并降低代码速度。

if (cs >= 1 && cs <= 4)
{
    if(this.engravingFontCaseSenstiveOptions(cText) == "Lower")
    {
        $('#overlay_image_text').css({
            'margin-top' : '-162px',
            'font-size' : '60px'
        });
    }
    else if(this.engravingFontCaseSenstiveOptions(cText) == "Upper")
    {
        $('#overlay_image_text').css({
            'margin-top' : '-154px',
            'margin-top' : '-154px',
            'font-size' : '48px',
            'margin-left' : '0px'
        });
    }
    else
    {
        $('#overlay_image_text').css({
            'margin-top' : '-162px',
            'font-size' : '60px',
            'margin-left' : '0px'
        });
    }
}
else if(cs == 5)
{
    if(this.engravingFontCaseSenstiveOptions(cText) == "Lower")
    {
        $('#overlay_image_text').css({
            'margin-top' : '-152px',
            'font-size' : '54px',
            'margin-left' : '0px'
        });
    }
    else if(this.engravingFontCaseSenstiveOptions(cText) == "Upper")
    {
        $('#overlay_image_text').css({
            'margin-top' : '-143px',
            'font-size' : '45px',
            'margin-left' : '0px'
        });
    }
    else
    {
        $('#overlay_image_text').css({
            'margin-top' : '-143px',
            'font-size' : '45px',
            'margin-left' : '0px'
        });
    }
}

现在只是这样你的文字不会将容器div #overlay_image_text添加到自动换行

#overlay_image_text {
    word-wrap: break-word;
}

您可以在https://developer.mozilla.org/es/docs/Web/CSS/word-wrap http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

中查看更多内容

Answer 4

我想在固定3.8.0内建议一个关于拟合文本的示例：

<强> HTML：

3.6.13

<强> CSS：

<div>

<强> JS：

<div id="fitText">

</div>

JsFiddle DEMO

我希望它有所帮助，谢谢！

如何强制文本适合div

4 个答案: