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

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

编辑：用更优化的循环更新了代码 sn-p 和 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>

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 库。更多知识可以找here