javascript - 如何为内容不断被替换的段落设置字体大小

Question

我想设置一个框，里面有一个段落。每次单击按钮后，本段的文本都应该被替换。对我来说重要的是，这段文字应该作为一行留在方框内，而不是中断。为此，我决定使用 FitText.js 插件，因为单词有不同的长度(给定的单词只是一个例子)。通过将其设置为表格和表格单元格，我实现了很好的对齐(垂直和水平)。您知道为什么给定的代码无法正常工作吗？

var words = ["Emily", "William Callum Smith Jr.", "Edwaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaard", "Bradley"];

var button1 = document.getElementById("give_me_a_name_please");

button1.addEventListener("click", function1);

function getRandomItem(array){
    return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}
   
function function1(){
    var randomWord = getRandomItem(words); 
    document.getElementById('word').innerHTML = randomWord;
}

$('#give_me_a_name_please').click(function() { 
    function resize () { $("#word").fitText(0.6); } 
});

#parent_of_word {
  width: 20%;
  height: 20%;
  top: 10%;
  left: 10%;
  display: flex;
  position: absolute;
  text-align: center;
  justify-content: center;
  line-height: 100%;
  border: 5px solid black;
  word-break: keep-all;
  white-space: nowrap;
}

#word {
  color: brown;
  display:flex;
  align-items: center;
  justify-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/FitText.js/0b4183af/jquery.fittext.js"></script>


<div id="parent_of_word">
    <p id="word">----------------</p>
</div>
<button id="give_me_a_name_please">Button</button>

Answer 1

编辑:更新的代码片段和 JSFiddle 具有更优化的循环。

我已经对您的示例代码进行了调整，使其更加精简和易于理解。它还使用纯 jQuery 而不是 jQuery 和纯 JS 的混合，并且在多次按下按钮后不会在“未定义”处停止，从而导致一个空数组。相反，它会再次循环所有单词。

这里有两个主要的解决方案。

• 从这种迭代方法中获得灵感 JavaScript Scale Text to Fit in Fixed Div其中字体大小从固定值开始，然后根据需要缩小，直到单词的宽度小于其容器的宽度。不需要插件，因为这非常简单。
• 第二部分实现了overflow:hidden，以便在文本太大以至于不可能收缩得足够小的情况下(参见 while 循环中的下限 8)，它仍然不会破壳而出。

另见 the JSFiddle version .

var words = [
  "Emily",
  "William Callum Smith Jr.",
  "Edwaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaard",
  "EdwaaaaaaaaaaaaaaaaaaaAAAAAAAAAaaaaaAAaaaaAAAaaaaaaaaaaaaaaaaaaaaaaaaard",
  "Bradley",
  "The quick brown fox"
];

var changeWord = $("#change_word");
var parentOfWord = $("#parent_of_word");
var word = $("#word");
var idx = 0;

changeWord.click(function() {
  word.text(words[idx++ % words.length]);
  var size = 40;
  word.css("font-size", size);
  while (word.width() > parentOfWord.width() && size > 8) {
    word.css("font-size", --size);
  }
});

#parent_of_word {
  width: 200px;
  height: 50%;
  top: 50px;
  left: 50%;
  margin-left: -100px;
  display: flex;
  position: absolute;
  text-align: center;
  justify-content: center;
  line-height: 100%;
  border: 5px solid black;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
}

#word {
  color: brown;
  display: flex;
  align-items: center;
  justify-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <button id="change_word">Button</button>
</p>
<div id="parent_of_word">
  <p id="word">----------------</p>
</div>