如果文本比其容器长，则降低字体大小，直到文本适合

Question

我们有一个包含动画文本的容器。

我们为文本定义了一个默认字体大小，但是如果文本超出容器的宽度，我们希望降低字体大小，以便文本无论多长都能在一行中放入容器中。

到目前为止，这是我的代码：

//The Text That would be fit into the container
let mytext = 'I was sent to earth to protect you!';

//The function to determine mytext width
function getTextWidth(text, font) {
      var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
      var context = canvas.getContext("2d");
      context.font = font;
      var metrics = context.measureText(text);
      return metrics.width;
      };

      //width of the upperGuide container
      let width = document.getElementsByClassName("upperGuideContainer")[0].clientWidth;

      let text_Length;
      let default_size = 5.6;
   
      /* Keep lowering the default font size till the text_Length is smaller than
        its container width So that the text can fit in the container */
      do {
          text_Length = getTextWidth(mytext, `bold ${default_size}vw Open Sans`).toFixed(2);
          //console.log("length inside: " + text_Length);
          default_size -= 0.01;
          //console.log("default_size inside: " + default_size);

      }
      while (text_Length > width);
      
  setTimeout(function(){
      //modify the font size based on text length
      upperGuideText.style.fontSize = `${default_size}vw`;

      //Append and animate the mytext
      upperGuideText.innerHTML = `${mytext}`;
      upperGuideText.classList.add("upperGuideAnimeShow");
      upperGuideText.classList.remove("upperGuideAnimeHide");
      }, 500);      

.upperGuideContainer {
    position: absolute;
    overflow: hidden;
    left: 10vw;
    top: 48.5vh;
    height: 26vh;
    width: 82vw;   
    outline: 0.1vw dashed orange;
}

.upperGuide {
    position: absolute;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    color: rgb(128, 128, 128);
    left: 0.5vw;
    opacity: 0;
    margin: 0;
    top: 0;
    bottom: -16vh;
    display: flex;
    align-items: center;
}

/*Animations*/

.upperGuideAnimeShow {
    animation: upperGuideShow 0.3s ease-in-out;
    animation-delay: 0.1s;
    animation-fill-mode: forwards ;
}

.upperGuideAnimeHide {
    animation: upperGuideHide 0.3s ease-in-out;  
    animation-fill-mode: forwards ;
}

@-webkit-keyframes upperGuideShow {
  0%    { opacity: 0; top: 10vh }
  100%  { opacity: 1; top: -16vh }
}

@-webkit-keyframes upperGuideHide {
   from { opacity: 1; top: -16vh }
   to   { opacity: 0; top:  10vh }
}

<div class = "upperGuideContainer">
 <p id="upperGuideText" class="upperGuide"></p>
</div>

代码有效，当mytext 比容器长时，我似乎可以降低字体大小，但由于某种原因，它没有足够降低字体大小，我们有两行句子不适合放在容器中。

注意：我想要可以容纳在容器中的最大可能字体大小...所以我需要default_size -= 0.01; 原封不动。

Answer 1

我更改了 default_size -= 1.0；

//The Text That would be fit into the container
let mytext = 'I was sent to earth to protect you!';

//The function to determine mytext width
function getTextWidth(text, font) {
      var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
      var context = canvas.getContext("2d");
      context.font = font;
      var metrics = context.measureText(text);
      return metrics.width;
      };

      //width of the upperGuide container
      let width = document.getElementsByClassName("upperGuideContainer")[0].clientWidth;

      let text_Length;
      let default_size = 5.6;
   
      /* Keep lowering the default font size till the text_Length is smaller than
        its container width So that the text can fit in the container */
      do {
          text_Length = getTextWidth(mytext, `bold ${default_size}vw Open Sans`).toFixed(2);
          //console.log("length inside: " + text_Length);
          default_size -= 1.0;
          //console.log("default_size inside: " + default_size);

      }
      while (text_Length > width);
      
  setTimeout(function(){
      //modify the font size based on text length
      upperGuideText.style.fontSize = `${default_size}vw`;

      //Append and animate the mytext
      upperGuideText.innerHTML = `${mytext}`;
      upperGuideText.classList.add("upperGuideAnimeShow");
      upperGuideText.classList.remove("upperGuideAnimeHide");
      }, 500);      

.upperGuideContainer {
    position: absolute;
    overflow: hidden;
    left: 10vw;
    top: 48.5vh;
    height: 26vh;
    width: 82vw;   
    outline: 0.1vw dashed orange;
}

.upperGuide {
    position: absolute;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    color: rgb(128, 128, 128);
    left: 0.5vw;
    opacity: 0;
    margin: 0;
    top: 0;
    bottom: -16vh;
    display: flex;
    align-items: center;
}

/*Animations*/

.upperGuideAnimeShow {
    animation: upperGuideShow 0.3s ease-in-out;
    animation-delay: 0.1s;
    animation-fill-mode: forwards ;
}

.upperGuideAnimeHide {
    animation: upperGuideHide 0.3s ease-in-out;  
    animation-fill-mode: forwards ;
}

@-webkit-keyframes upperGuideShow {
  0%    { opacity: 0; top: 10vh }
  100%  { opacity: 1; top: -16vh }
}

@-webkit-keyframes upperGuideHide {
   from { opacity: 1; top: -16vh }
   to   { opacity: 0; top:  10vh }
}

<div class = "upperGuideContainer">
 <p id="upperGuideText" class="upperGuide"></p>
</div>

Answer 2

将white-space: nowrap; 添加到upperGuide 类就像一个魅力。

问题在于，当文本占用多于一行时，宽度不会改变，我们应该防止换行以使文本宽度真实。

.upperGuide {
    position: absolute;
    white-space: nowrap;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    color: rgb(128, 128, 128);
    left: 0.5vw;
    opacity: 0;
    margin: 0;
    top: 0;
    bottom: -16vh;
    display: flex;
    align-items: center;
}