Question

我有div并且显示div文本

<div class="td">
  <div class="title main-color">test text</div>
</div>

但是如果有大文字则会超出div。如果有大文字字体变小，我想这样做。我怎样才能做到这一点？

JSFIDDLE就在这里

P.S。我不希望div高高增长

Answer 1

<强>演示 https://jsfiddle.net/qjgjg2vh/

<强> HTML

<div class="td">
<div class="title main-color">test text</div>
</div>

<div class="td">
<div class="title main-color">test text is bigger now and goes outside of div and dont appears</div>
</div>

<强> CSS

.main-color {
    opacity: 0.6;
    background: #ffffff;
}

.title {
    height: 100%;
    width: 470px;
    border-radius: 20px;
    float: left;
    text-align: center;
    line-height: 100px;
    font-size: 26px;
    overflow: hidden;
}

.td {
    margin: 60px 0;
    height: 100px;
    width: 100%;
}

<强> JQUERY

您的原始代码获取了匹配＆＃39; .question p＆＃39;的所有段落的字符数。例如如果你有两个段落，一个有十个字符，另一个有二十个字符，你的JS会运行一次总共三十个，而不是依次处理每个段落。

$(function($){
    $(".title.main-color").each(function () {
        var numChars = $(this).text().length;     
        if ((numChars >= 1) && (numChars < 20)) {
            $(this).css("font-size", "2.2em");
        }
        else if ((numChars >= 20) && (numChars < 60)) {
            $(this).css("font-size", "1.8em");
        }
        else if ((numChars >= 60) && (numChars < 100)) {
            $(this).css("font-size", "1em");
        }
        else if ((numChars >= 100) && (numChars < 140)) {
            $(this).css("font-size", "0.9em");
        }
        else {
            $(this).css("font-size", "0.8em");
        }           
    });
});

Answer 2

试试这个

<div class="td">
<div class="title main-color">test text</div>
</div>
<div class="td">
<div class="title main-color">test text is bigger now and goes outside of div and dont appears</div>
</div>

.main-color {
    opacity: 0.6;
    background: #ffffff;
}

.title {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 470px;
    border-radius: 20px;
    float: left;
    line-height: 30px;
    font-size: 26px;
}

.td {
    margin: 60px 0;
    height: 100px;
    width: 100%;
}

现场演示 - https://jsfiddle.net/grinmax_/zjaq98Ln/11/

Answer 3

您可以使用javaScript并使字体越来越小，直到具有文本的子元素的高度适合父元素的高度为止。我还为文本添加了visibility:hidden，在fontSize减少之后添加了visibility:visible以消除闪烁效果。请记住将文本放入额外元素，例如。 span。更改文本长度以查看效果。

＆＃13;

var samp = document.getElementById('samp');

fitFont(samp);


function fitFont(elem){
  var child = elem.children[0];
  var getFontSize = parseFloat(window.getComputedStyle(child).getPropertyValue('font-size'));
    
  while(child.offsetHeight>elem.clientHeight){
    getFontSize -= .1;
    child.style.fontSize = getFontSize + 'px';
  }
  child.style.visibility = 'visible';
}

＆＃13;

#samp {
  background-color:white;
  width:300px;
  height:100px;
  border:solid 2px #33aaff;
}

#samp span {
  display: inline-block;
  visibility:hidden;
  font-size:50px;
}

＆＃13;

<div id="samp">
  <span>test text is bigger now and goes outside of div and dont appears test text is bigger now and goes outside of div and dont appears test text is bigger now and goes outside of div and dont appears
  </span>
</div>

＆＃13;

Answer 4

当然你可以针对javascript解决方案来计算字母/单词并相应地调整字体大小。

$(function() {

    var $title= $(".title");

    var $numWords = $title.text().split(" ").length;

    if (($numWords >= 1) && ($numWords < 10)) {
        $quote.css("font-size", "36px");
    }
    else if (($numWords >= 10) && ($numWords < 20)) {
        $title.css("font-size", "32px");
    }
    else if (($numWords >= 20) && ($numWords < 30)) {
        $title.css("font-size", "28px");
    }
    else if (($numWords >= 30) && ($numWords < 40)) {
        $title.css("font-size", "24px");
    }
    else {
        $title.css("font-size", "20px");
    }    

});

但如果您想使用而不使用Javascript ，您可以做一些事情。不幸的是，使用css无法根据文本长度更改字体大小。

备选方案：

使用水平滚动条(overfloy-x: scroll;)
使框更大，（任何尺寸）https://jsfiddle.net/zjaq98Ln/10/
（显示文字溢出）可能不理想
使用text-overflow：https://jsfiddle.net/zjaq98Ln/9/

如果有大文

4 个答案:

备选方案：