Question

我有一个具有特定尺寸（我的意思是，恒定宽度和高度）的元素。我想更改其中文本的字体大小，以避免容器中出现任何内容。

＆＃13;

div {
  border: 1px solid;
  height: 60px;
  width: 200px;
  margin: 30px;
}

＆＃13;

<div>
whatever this is. this is a test. whatever this is. this is a test.
</div>


<div>
whatever this is. this is a test. whatever this is. this is a test. whatever this is. this is a test. whatever this is. this is a test.
</div>

＆＃13;

在这个^小提琴中，第一个<div>的字体大小应该更大以填充容器，而在第二个中，字体大小应该更小，因为任何东西都不应该从容器中出来。

知道我该怎么做？

Answer 1

有几种方法可以在特定元素中显示溢出文本。但是，如果字体大小已经非常小，那么减小字体大小并不是一个好主意。您可以将 overflow：auto css添加到元素。您可以尝试 overlow：overflow / overflow-x / overflow-y 属性。

即使您想减小字体大小，也需要借助 javaScript / jQuery 来计算字符数，并根据需要将字体大小添加到元素中。

jQuery：

var chrLen = $("#div").text().length;
if(chrLen > 70) {
    $("#div").css("fontSize","10px");
    // OR
    $("#div").addClass("className");
}

javaScript：

var div = document.getElementById("div");
var txt = div.innerHTML;
var chrLen = txt.length;
if(chrLen > 70) {        
    div.style.fontSize = "10px";
    // OR
    div.classList = "className"
}

是否可以根据容器制作动态字体大小？

1 个答案: