Как избежать переноса слов при изменении размера шрифта одного слова - PullRequest
Новая
       3

Как избежать переноса слов при изменении размера шрифта одного слова

0 голосов
/ 07 февраля 2019

Синопсис: У меня есть абзац текста, и когда я наведу курсор мыши на любое отдельное слово, я бы хотел, чтобы размер шрифта увеличился, а затем снова уменьшился после ухода мыши.

Проблема: Это хорошо работает для некоторых абзацев, однако для других, когда слово увеличивается в размере, оно выбивает последнее слово в этой строке на следующей строке (в основном вызывает деформацию слова).Несмотря на то, что некоторые фразы могут содержать слова, после изменения размера браузера я снова сталкиваюсь с этой проблемой.

Мой вопрос: Это не самый технический способ выразить это, но - есть ли какой-то видзначения переноса слов, где я могу по существу «заморозить» все на месте, или, возможно, когда мышь находится над этой линией, выделить дополнительное пространство для ее ширины для размещения пробела?

Сводка кода:

HTML file - только одно значение абзаца в теле.InnerHTML заменяется из файла .js перед загрузкой.

CSS - обрабатывает позиционирование, заполнение и перенос слов.

JS -«Фраза» - это переменная, содержащая текст, затем есть некоторый код, который разбивает его на массив, присваивает каждому слову свой класс, а затем обновляет innerHTML html-файла.JQuery используется для анимации каждого слова с этим классом, когда на него наведена мышь.

Полное раскрытие, я очень новичок в области веб-разработки и буду очень признателен за любые советы / отзывы / статьи, которые помогут мне решить эту проблему! 

$(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>
...