Question

我一直在尝试重新调整文本大小以修复固定大小的div，我发现textfill插件似乎非常适合它，除了我无法通过某种原因让它工作：

HTML：

<script src="Scripts\jquery-1.11.2.min.js"></script>
<script src="Scripts\jquery.textfill.min.js"></script>

<div id="textfilltest">
    <div id="name1"><span>Name 1</span></div>
</div>

<script>
$(document).ready(function(){
    $("#name1").textfill();
});
</script>

的CSS：

#name1 {
    position: absolute;
    left: 75px;
    top: 30%;
    width: 200px;
    height: 50px;
}

当我写更多文字时，它会一行而不是调整大小，我不知道为什么会这样做

编辑：here's a link to the website

Answer 1

我尝试了你的代码并将css更改为

#name1 {
    position:static;
    left: 75px;
    top: 30%;
    width: 200px;
    height: 50px;
}

似乎工作正常

Answer 2

要使用jQuery文本填充阻止换行，请添加等于line-height的{{1}}：

height

$(document).ready(function(){
  $("#name1").textfill();
});

#name1 {
    position: absolute;
    left: 75px;
    top: 30%;
    width: 200px;
    height: 50px;
    line-height: 50px;
    border: 1px solid black;
}

为什么文本填充不适用于这种情况？

2 个答案: