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

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

var words=[“艾米丽”、“小威廉·卡勒姆·史密斯”、“埃德瓦德”、“布拉德利”]；
var button1=document.getElementById（“请给我一个名字”）；
按钮1.addEventListener（“单击”，功能1）；
函数getRandomItem（数组）{
返回array.splice（Math.floor（Math.random（）*array.length），1）[0]；
}
函数function1（）{
var randomWord=getRandomItem（单词）；
document.getElementById（'word'）。innerHTML=randomWord；
}
$（'请给我一个名称'）。单击（函数（）{
函数resize（）{$（“#word”）.fitText（0.6）；}
});
#word的父项{
宽度：20%；
身高：20%；
排名前10%；
左：10%；
显示器：flex；
位置：绝对位置；
文本对齐：居中；
证明内容：中心；
线高：100%；
边框：5px纯黑；
断字：保留一切；
空白：nowrap；
}
#话{
颜色：棕色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

----------------
按钮
将文本排成一行而不中断：

white-space: nowrap;

要垂直和水平居中放置任何对象，请执行以下操作：

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

适用于您的示例：


var words=[“Emily”，“William Callum Smith Jr.”，“Edwaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
var button1=document.getElementById（“请给我一个名字”）；
按钮1.addEventListener（“单击”，功能1）；
函数getRandomItem（数组）{
返回array.splice（Math.floor（Math.random（）*array.length），1）[0]；
}
函数function1（）{
var randomWord=getRandomItem（words）| |“没有更多选项”；
document.getElementById（'word'）。innerHTML=randomWord；
}
$（'请给我一个名称'）。单击（函数（）{
函数resize（）{$（“#word”）.fitText（0.6）；
} 
});
#word的父项{
显示器：flex；
对齐项目：居中；
证明内容：中心；
/*rest是可选的，只是为了演示
*垂直线形
*/  
高度：计算（100vh-40px）；
边框：1px纯红；
填充：1rem；
}
#话{
空白：nowrap；
边框：5px实心；
填充：1rem；
flex:01自动；
最大宽度：100%；
溢出：隐藏；
文本溢出：省略号；
}
* {
保证金：0；
框大小：边框框；
}

----------------
按钮
解决问题的最简单方法是将word的宽度值更改为
宽度：自动
。这将使宽度根据内容自动调整（根据段落长度自动调整）

工作示例：
这是因为根据给定的示例，您已将单词的
#parent_
的
宽度定义为
20%
，这当然与其父元素相关，即body元素

因此，不能仅根据内容的宽度动态调整word的父项的宽度。它只能与其父宽度一起“视觉调整大小”，但仍然需要
20%
。即使使用的单位是
%
，并且元素的宽度是动态的，它仍然是固定的

因此，我的解决方案是省略
width
属性，只定义您选择的
填充
：

注意：我已经注释掉了不必要的内容


var words=[“艾米丽”、“小威廉·卡勒姆·史密斯”、“埃德瓦德”、“布拉德利”]；
var button1=document.getElementById（“请给我一个名字”）；
按钮1.addEventListener（“单击”，功能1）；
函数getRandomItem（数组）{
返回array.splice（Math.floor（Math.random（）*array.length），1）[0]；
}
函数function1（）{
var randomWord=getRandomItem（单词）；
document.getElementById（'word'）。innerHTML=randomWord；
}
$（'请给我一个名字'）。单击（函数（）{
函数resize（）{
$（“单词”）.fitText（0.6）；
} 
});
#word的父项{
显示器：flex；
/*宽度：20%；罪魁祸首*/
身高：20%；
填充：0 20px；/*也可以使用[%]*/
位置：绝对位置；
排名前10%；
左：10%；
/*文本对齐：居中*/
证明内容：中心；
对齐项目：居中；/*已添加；垂直对齐*/
/*线高：100%*/
边框：5px纯黑；
/*
断字：保留一切；
空白：nowrap；
*/
颜色：棕色；
}
/*
#话{
颜色：棕色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
*/

按钮
----------------
编辑：更新了代码片段和JSFIDLE，使用了更优化的循环

我已经修改了您的示例代码，使其更精简、更易于理解。它还使用纯jQuery，而不是jQuery和纯JS的混合，并且在多次按下按钮后不会在“undefined”处停止，从而产生一个空数组。相反，它将再次循环遍历所有单词

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


我们从这种迭代方法中得到启发，字体大小从一个固定值开始，然后根据需要缩小，直到单词的宽度小于其容器的宽度。不需要插件，因为这非常简单
第二部分实现了
overflow:hidden
，这样，如果文本太大，不可能
#parent_of_word {
    min-width: 20%;
    width: auto;
    padding: 0px 20px;
}