Question

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

问题：对于某些段落来说，这很好用，但是对于另一些段落，当单词的大小增加时，它将把该行的最后一个单词敲到下一行（基本上迫使单词变形）。即使有些词组可能会发声，但在调整浏览器大小时，我还是偶然发现了这个问题。

我的问题：这不是技术上最实用的方式，但是-是否存在某种自动换行值，我可以在其中实质上“冻结”所有内容，或者也许在鼠标操作时在那条线上，请为其宽度分配额外的空间以适应间距？

代码摘要：

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

CSS -处理定位，填充和自动换行。

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

全面披露，我是Web开发领域的新手，非常感谢能帮助我解决这一问题的任何建议/反馈/文章！

$(document).ready(() => {
  let phrase = "I am an Interactive Webpage set on Frustrating the Guy trying to CODE me";
  let phraseArray = phrase.split(" ");
  let htmlArray = phraseArray.map(word => {
    return "<span class='word'>" + word + "</span>"
  })
  let finalPhrase = htmlArray.join(" ");
  document.getElementById("text").innerHTML = finalPhrase;

  $(".word").on("mouseenter", event => {
    $(event.currentTarget).animate({
      fontSize: "80px"
    }, 400);
  }).on("mouseleave", event => {
    $(event.currentTarget).animate({
      fontSize: "60px"
    }, 250);
  })
});

body {
  background-color: #5F5F5F;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

#text {
  color: #FFFFFF;
  font-size: 60px;
  font-family: "Major Mono Display", monospace;
  padding: 10%;
  margin: 10%;
  text-align: center;
  line-height: 160%;
  border: 1px solid white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Major+Mono+Display" rel="stylesheet">
<p id="text"></p>

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

0 个答案: