Javascript 更改单个单词的字体大小时如何避免换行

简介：我有一段文字，当我将鼠标移到任何一个单词上时，我希望它的字体大小增加，然后在鼠标离开时再次减小

问题：这在某些段落中效果很好，但在其他段落中，当单词的大小增加时，它会将该行的最后一个单词敲到下一行（基本上会强制单词扭曲）。尽管有些短语可能会出现，但在调整浏览器的大小时，我再次遇到了这个问题

我的问题：这不是最专业的表达方式，但是-是否存在某种文字换行值，我可以将所有内容“冻结”在适当的位置，或者当鼠标在该行上时，为其宽度分配额外的空间以适应间距

代码摘要：

HTML文件-正文中只有一个段落值。加载之前，将从.js文件中替换innerHTML

CSS-处理定位、填充和换行

JS-“Phrase”是保存文本的变量，然后有一些代码将其拆分为一个数组，为每个单词指定自己的类，然后更新html文件的innerHTML。当鼠标悬停在JQuery上时，JQuery用于使用该类设置每个单词的动画

充分披露，我是网络开发领域的新手，非常感谢任何建议/反馈/文章来帮助我解决这个问题

$（文档）.ready（（）=>{
let phrase=“我是一个交互式网页，旨在挫败试图给我编码的家伙”；
让phraseArray=phrase.split（“”）；
让htmlArray=phraseArray.map（word=>{
返回“+word+”
})
让finalPhrase=htmlaray.join（“”）；
document.getElementById（“text”）.innerHTML=finalPhrase；
$（“.word”）.on（“鼠标指针”，事件=>{
$（event.currentTarget）。设置动画({
字体大小：“80px”
}, 400);
}).on（“鼠标移动”，事件=>{
$（event.currentTarget）。设置动画({
字体大小：“60像素”
}, 250);
})
});
正文{
背景色：#5F5F；
宽度：100%；
身高：100%；
位置：绝对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#正文{
颜色：#FFFFFF；
字体大小：60px；
字体系列：“主要单声道显示”，单声道空间；
填充：10%；
利润率：10%；
文本对齐：居中；
线高：160%；
边框：1px纯白；
}

不要在悬停时弄乱字体大小，这通常会产生糟糕的结果。应用
缩放
变换将元素的显示大小增加一点点。转换不会更改元素的初始空间要求，因此不会影响文本的其余部分。谢谢@Rory-将使用scale now查看一些选项：）