如何設置其內容不斷被替換的段落的字體大小

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的混合，並且在按下按鈕幾次后不會停在'undefined'，導致一個空數組。 它將改為循環遍歷所有單詞。

這里有兩種主要的解決方案。

• 我們從這種迭代方法中獲取靈感，將JavaScript Scale Text設置為Fixed Div ，其中字體大小以固定值開始，然后根據需要縮小，直到單詞的寬度小於其容器的寬度。 不需要插件，因為這非常簡單。
• 第二部分實現overflow:hidden以便在文本如此龐大以至於不能縮小到足夠小的時候（參見while循環中的下限8），它仍然不會突破其容器。

另請參見JSFiddle版本 。

 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> 

Answer 2

要將文本放在一行中，而不要破壞：

white-space: nowrap;

垂直和水平居中：

display:flex;
align-items: center;
justify-content: center;

適用於您的示例：

 var words = ["Emily", "William Callum Smith Jr.", "Edwaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaard", "Resize this to see how it behaves on narrower screens. Lorem ipsum dolor sit amet bla bla bla, lorem ipsum dolor sit amet bla bla bla, lorem ipsum dolor sit amet bla bla bla.", "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) || 'No more options.'; document.getElementById('word').innerHTML = randomWord; } $( '#give_me_a_name_please' ).click(function() { function resize () { $("#word").fitText(0.6); } }); 

 #parent_of_word { display: flex; align-items: center; justify-content: center; /* rest optional, just to demo * vertical alignment */ height: calc(100vh - 40px); border: 1px solid red; padding: 1rem; } #word { white-space: nowrap; border: 5px solid; padding: 1rem; flex: 0 1 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } * { margin: 0; box-sizing: border-box; } 

 <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 3

這是因為你已經將#parent_of_word的width定義為20% ，這當然與其父元素 （即body元素）相關，基於給定的示例。

因此， #parent_of_word的width不能僅根據其內容的寬度動態調整大小。 它只能與其父寬度 “視覺上調整大小” ，但仍然需要20% 。 即使使用的單位是%並且元素的寬度是動態的 ，它仍然是固定的。

所以我的解決方案是省略width 屬性 ，只需定義你選擇的padding ：

注意：我已經注釋掉了不必要的內容。

 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 { display: flex; /*width: 20%; the culprit*/ height: 20%; padding: 0 20px; /* can also use [%] */ position: absolute; top: 10%; left: 10%; /*text-align: center;*/ justify-content: center; align-items: center; /* added; vertical alignment */ /*line-height: 100%;*/ border: 5px solid black; /* word-break: keep-all; white-space: nowrap; */ color: brown; } /* #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> <button id="give_me_a_name_please">Button</button> <div id="parent_of_word"> <p id="word">----------------</p> </div> 

Answer 4

解決問題的最簡單方法是將#parent_of_word的寬度值更改為width:auto 。 這將根據內容自動調整寬度（根據段落的長度自動調整）。

工作示例： https ： //jsfiddle.net/18faLbap/4/

Answer 5

當我想將文字保持在一行時，我通常通過這種方法來做。 特別是我的網格。 因此，無論你的盒子有多長，它都會在一行中，當你將它懸停在它上面時，它將面包線到可讀性。

 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%; 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; } #word { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: brown; display:flex; align-items: center; justify-content: center; } #word:hover { white-space: normal; } 

 <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 6

#parent_of_word {
    min-width: 20%;
    width: auto;
    padding: 0px 20px;
}

我在這里做的就是添加width: auto並設置min-width:20% 。 這使得文本在框內更新時寬度動態。 添加一點padding ，使它看起來也很漂亮。 希望這可以幫助。

Answer 7

看到你已經在頁面上有jQuery，考慮使用jquery-textfill插件：

http://jquery-textfill.github.io/

它將確保您的文本適合您的容器。

Answer 8

有一種CSS方式可以在內容中使用單詞

我基本上禁用了#parent_of_word的絕對寬度，並將display更改為inline-block ，以使其寬度適合其內容。 為了使它更漂亮，我添加了padding屬性。 代碼的簡化版和改進版如下所示。

 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; } 

 #parent_of_word { top: 10%; left: 10%; display: inline-block; position: absolute; text-align: center; padding: 10px; border: 5px solid black; word-break: keep-all; } #word { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: brown; display:flex; align-items: center; justify-content: center; } #word:hover { white-space: normal; } 

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

所以你現在不再需要額外的JavaScript庫了。 可以在這里找到更多的知識