容器内的适合段落

Question

我有一段代码可以使该段落满足有关字体大小和行高的某些条件，但是很遗憾，我无法使代码正常工作：我认为无限循环会导致问题。

注意：请勿运行代码，由于无限的while循环，您的浏览器将崩溃。

如何解决此问题？我缺少什么？

这里是代码：

const dialogueText = "To be successful, you have to use each day as an opportunity to improve, to be better, to get a little bit closer to your goals. It might sound like a lot of work and with a busy schedule, next to impossible. But the best part is, the more you accomplish, the more you'll want to do, the higher you'll want to reach. So as long as you have the hunger for success, you will always have the power within you to achieve it."; // Get from global

const answerSentence = document.getElementById("answerSentence");

generateDialogue();

function generateDialogue() {
  answerSentence.innerHTML = `<span>${dialogueText}</span>`;
  scaleFontVW();
}

function scaleFontVW() {
  let paragraph = document.getElementById("answerSentence");
  let paragraphContainer = document.getElementById("pc");
  let spans = document.getElementsByTagName("span");

  let style = window.getComputedStyle(spans[0], null).getPropertyValue('font-size');
  let fontSize = parseFloat(style);

  while (paragraph.scrollHeight >= paragraphContainer.clientHeight) {
    fontSize -= 1;
    paragraph.style.fontSize = fontSize + "vh";
    paragraph.style.lineHeight = fontSize * 0.4 + fontSize + "vh";
  }
}

@font-face {
  font-family: "Open Sans Regular";
  src: url(OpenSans-Regular.ttf) format("truetype");
}

html {
  overflow: hidden;
  background-color: transparent;
}

.containerAnswering {
  position: absolute;
  overflow: hidden;
  left: 8.7vw;
  top: 25vh;
  height: 55vh;
  width: 82vw;
  /*outline: 0.1vw dashed orange;*/
}

.answerSentence-class {
  position: absolute;
  white-space: pre-wrap;
  font-family: 'Open Sans Regular', sans-serif;
  color: #595959;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: justify;
  text-justify: inter-word;
}

<div id="pc" class="containerAnswering">
  <div id="answerSentence" class="answerSentence-class"></div>
</div>

Answer 1

while循环中的>=是您无休止循环的原因。发生这种情况是因为元素没有溢出时paragraph.scrollHeight等于paragraphContainer.clientHeight。

我从一个巨大的字体开始，并添加了console.log(fontSize)，因此您可以在操作中“查看”它。

const dialogueText = "To be successful, you have to use each day as an opportunity to improve, to be better, to get a little bit closer to your goals. It might sound like a lot of work and with a busy schedule, next to impossible. But the best part is, the more you accomplish, the more you'll want to do, the higher you'll want to reach. So as long as you have the hunger for success, you will always have the power within you to achieve it."; // Get from global

const answerSentence = document.getElementById("answerSentence");

generateDialogue();

function generateDialogue() {
  answerSentence.innerHTML = `<span>${dialogueText}</span>`;
  scaleFontVW();
}

function scaleFontVW() {
  let paragraph = document.getElementById("answerSentence");
  let paragraphContainer = document.getElementById("pc");
  let spans = document.getElementsByTagName("span");

  let style = window.getComputedStyle(spans[0], null).getPropertyValue('font-size');
  let fontSize = parseFloat(style);

  while (paragraph.scrollHeight > paragraphContainer.clientHeight) {
    console.log(fontSize);
    fontSize -= 1;
    paragraph.style.fontSize = fontSize + "vh";
    paragraph.style.lineHeight = fontSize * 0.4 + fontSize + "vh";
  }
}

@font-face {
  font-family: "Open Sans Regular";
  src: url(OpenSans-Regular.ttf) format("truetype");
}

html {
  overflow: hidden;
  background-color: transparent;
}

.containerAnswering {
  position: absolute;
  overflow: hidden;
  left: 8.7vw;
  top: 25vh;
  height: 55vh;
  width: 82vw;
  /*outline: 0.1vw dashed orange;*/
}

.answerSentence-class {
  position: absolute;
  white-space: pre-wrap;
  font-family: 'Open Sans Regular', sans-serif;
  color: #595959;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: justify;
  text-justify: inter-word;
  font-size: 100vmin;
}

<div id="pc" class="containerAnswering">
  <div id="answerSentence" class="answerSentence-class"></div>
</div>

还有一个带有Window.requestAnimationFrame()的版本可以在实际中看到它：

const dialogueText = "To be successful, you have to use each day as an opportunity to improve, to be better, to get a little bit closer to your goals. It might sound like a lot of work and with a busy schedule, next to impossible. But the best part is, the more you accomplish, the more you'll want to do, the higher you'll want to reach. So as long as you have the hunger for success, you will always have the power within you to achieve it."; // Get from global

const answerSentence = document.getElementById("answerSentence");

generateDialogue();

function generateDialogue() {
  answerSentence.innerHTML = `<span>${dialogueText}</span>`;
  scaleFontVW();
}

function scaleFontVW() {
  let paragraph = document.getElementById("answerSentence");
  let paragraphContainer = document.getElementById("pc");
  let spans = document.getElementsByTagName("span");

  let style = window.getComputedStyle(spans[0], null).getPropertyValue('font-size');
  let fontSize = parseFloat(style);

  scale(paragraph, paragraphContainer, fontSize);
}

function scale(paragraph, paragraphContainer, fontSize) {
  if(paragraph.scrollHeight > paragraphContainer.clientHeight) {
    fontSize -= 1;
    paragraph.style.fontSize = fontSize + "vh";
    paragraph.style.lineHeight = fontSize * 0.4 + fontSize + "vh";  
    
    requestAnimationFrame(() => scale(paragraph, paragraphContainer, fontSize));
  }
  
  
}

@font-face {
  font-family: "Open Sans Regular";
  src: url(OpenSans-Regular.ttf) format("truetype");
}

html {
  overflow: hidden;
  background-color: transparent;
}

.containerAnswering {
  position: absolute;
  overflow: hidden;
  left: 8.7vw;
  top: 25vh;
  height: 55vh;
  width: 82vw;
  /*outline: 0.1vw dashed orange;*/
}

.answerSentence-class {
  position: absolute;
  white-space: pre-wrap;
  font-family: 'Open Sans Regular', sans-serif;
  color: #595959;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: justify;
  text-justify: inter-word;
  font-size: 50vmin;
}

<div id="pc" class="containerAnswering">
  <div id="answerSentence" class="answerSentence-class"></div>
</div>