Cómo ajustar el texto dentro de su contenedor adjuntas

foxer:

Quiero añadir un párrafo a la página y agregar cada palabra del párrafo a específica id(estoy envolviendo cada palabra en una spancon una idforma que podemos controlar el color de cada palabra más adelante)

El código funciona bien, pero hay un problema que no puedo arreglar sin una mano.

Quiero un tamaño de fuente máximo de 5vwy quiero disminuir el tamaño de la fuente con el fin de adaptarse a todo el párrafo en el interior del paragraphContainer.

Hice todo lo posible, pero por desgracia, no fue suficiente!

Usando let fontSize = getFontSize(paragraphOriginal);Traté de conseguir la altura del texto de varias líneas anexa, pero creo que sólo se necesita la altura de una sola línea! Si pudiera conseguir la altura de la línea múltiple ...

Aquí está el código:

// our paragraph
let paragraphOriginal = "During a discussion that popped up over this, Adam pointed out there is a new CSS property that is (as I understand it) specifically for this. This removes the need for three elements. Technically you only need one, the inline element, but it's likely you'll be doing this on a header so you'll probably end up with a block-parent anyway, which is best for spacing. LAST WORDS";

// Convert above paragraph to array of words
let paragraphWords = paragraphOriginal.replace(/\s+/g, " ").toLowerCase().replace(/\,|\?|\!|\:|\./g, '').trim().split(' ');


//dimensions of the paragraphContainer container
let height = document.getElementsByClassName("paragraphContainer")[0].clientHeight;

let text_Height;


// Add paragraph to page and assign each word an specific id 
generateParagraph();


function generateParagraph() {

  let paragraph = document.getElementById("paragraph");
  let answerPrototype = '';

  for (let i = 0; i < paragraphWords.length; i++) {
    paragraphWords[i] = ' ' + paragraphWords[i];
  }
  //paragraphWords[0] = paragraphWords[0].trim();

  let paragraphSpans = '';

  for (let i = 0; i < paragraphWords.length; i++) {

    paragraphSpans += `<span class='spans' id='spanID${i}'>${paragraphWords[i]}</span>`;

  };

  //modify the font size based on text length

  let fontSize = getFontSize(paragraphOriginal); // I think here is the problem

  console.log(fontSize);

  paragraph.style.fontSize = `${fontSize}vw`;

  paragraph.innerHTML = `${paragraphSpans}`;

};




function getFontSize(paragraph) {

  let default_size = 5;

  do {
    default_size -= 0.1;
    text_Height = getTextHeight(paragraph, `bold ${default_size}vw Open Sans`);
  }

  while (text_Height > height);

  return default_size.toFixed(2);

};


//Start Of Text Height Function
function getTextHeight(text, font) {
  let canvas = document.createElement("canvas")
  let context = canvas.getContext("2d");

  let sourceWidth = canvas.width;
  let sourceHeight = canvas.height;

  context.font = font;

  // place the text somewhere
  context.textAlign = "left";
  context.textBaseline = "top";
  context.fillText(text, 25, 5);

  // returns an array containing the sum of all pixels in a canvas
  // * 4 (red, green, blue, alpha)
  // [pixel1Red, pixel1Green, pixel1Blue, pixel1Alpha, pixel2Red ...]
  let data = context.getImageData(0, 0, sourceWidth, sourceHeight).data;

  let firstY = -1;
  let lastY = -1;

  // loop through each row
  for (let y = 0; y < sourceHeight; y++) {
    // loop through each column
    for (let x = 0; x < sourceWidth; x++) {
      //var red = data[((sourceWidth * y) + x) * 4];
      //var green = data[((sourceWidth * y) + x) * 4 + 1];
      //var blue = data[((sourceWidth * y) + x) * 4 + 2];
      let alpha = data[((sourceWidth * y) + x) * 4 + 3];

      if (alpha > 0) {
        firstY = y;
        // exit the loop
        break;
      }
    }
    if (firstY >= 0) {
      // exit the loop
      break;
    }

  }

  // loop through each row, this time beginning from the last row
  for (let y = sourceHeight; y > 0; y--) {
    // loop through each column
    for (let x = 0; x < sourceWidth; x++) {
      var alpha = data[((sourceWidth * y) + x) * 4 + 3];
      if (alpha > 0) {
        lastY = y;
        // exit the loop
        break;
      }
    }
    if (lastY >= 0) {
      // exit the loop
      break;
    }

  }

  return lastY - firstY;

}; //End Of Text Height Function

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

.paragraphContainer {
  position: absolute;
  overflow: hidden;
  left: 2.45vw;
  top: 25vh;
  height: 55vh;
  width: 95vw;
  outline: 0.1vw dashed orange;
}

.paragraph-class {
  position: absolute;
  white-space: pre-wrap;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #595959;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  padding: 0vh 1vh 20vh 1vh;
  justify-content: left;
  align-items: left;
}

<!DOCTYPE html>
<html>

<head>

  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <div class="paragraphContainer">
    <div id="paragraph" class="paragraph-class"></div>
  </div>


  <!-- <button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", function(){
  Read();
});
</script> -->


  <script src="script.js"></script>
</body>

</html>

Rogue Escarlata:

Hice todo lo posible para encontrar una solución alternativa para usted así que voy a explicar lo que hice y espero que ayude.

Primero que todo, removed getFontSize(paragraph)y getTextHeight(text, font)porque están devolviendo el mismo tamaño de fuente cada vez independientemente de la altura del texto y eliminado algunas reglas CSS que son inútiles.

A continuación, añade scaleFontVW()la función en la que tanto el escalo font-sizey la line-heightde cada uno spancomo sea necesario para hacer ambas cosas.

A continuación, while(paragraph.scrollHeight > paragraphContainer.clientHeight)básicamente estoy comparando la altura del contenido desbordado con la altura del contenedor y bucle hasta que ambos se convertirá.

A continuación, cada tamaño lapso se está redujo restando el valor de fontSize(por ensayo y error he encontrado 5 El buen funcionamiento), y la line-heightde la paragraph, así, la fórmula altura de la línea es bastante simple: font-size + font-size * 20%.

Las respuestas que ayudaron: Pablo y de micnic

// our paragraph
let paragraphOriginal = "During a discussion that popped up over this, Adam pointed out there is a new CSS property that is (as I understand it) specifically for this. This removes the need for three elements. Technically you only need one, the inline element, but it's likely you'll be doing this on a header so you'll probably end up with a block-parent anyway, which is best for spacing. LAST WORDS";



// Convert above paragraph to array of words
let paragraphWords = paragraphOriginal.replace(/\s+/g, " ").toLowerCase().replace(/\,|\?|\!|\:|\./g,'').trim().split(' ');


//dimensions of the paragraphContainer container
let height = document.getElementsByClassName("paragraphContainer")[0].clientHeight;

let text_Height;


// Add paragraph to page and assign each word an specific id 
generateParagraph();

// Scale the font to fit
scaleFontVW();

function generateParagraph() {

    let paragraph = document.getElementById("paragraph");
    let answerPrototype = '';

    for(let i = 0; i < paragraphWords.length; i++){
        paragraphWords[i] = ' ' + paragraphWords[i];
    }
    //paragraphWords[0] = paragraphWords[0].trim();

    let paragraphSpans = '';

    for (let i = 0; i < paragraphWords.length; i++) {

      paragraphSpans += `<span class='spans' id='spanID${i}'>${paragraphWords[i]}</span>`;

    };

    //modify the font size based on text length

    //let fontSize = getFontSize(paragraphOriginal ); // I think here is the problem

    //console.log(fontSize);
    
    //paragraph.style.fontSize = `${fontSize}vw`;
     
    paragraph.innerHTML = `${paragraphSpans}`;

};

function scaleFontVW() {
  let paragraph = document.getElementById("paragraph");
  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 -= 5;
    for(let i = 0; i < spans.length; i++) {
      spans[i].style.fontSize = fontSize+"px";
      }
    paragraph.style.lineHeight = fontSize*0.2 + fontSize + "px";
}
}

function scaleFontVW_2() {
  let paragraph = document.getElementById("paragraph");
  let paragraphContainer = document.getElementById("pc")

  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+"px";
    paragraph.style.lineHeight = fontSize*0.2 + fontSize + "px";
}
}

html{
  background-color: transparent;
}

.paragraphContainer {
    position: absolute;
    left: 2.45vw;
    top: 25vh;
    height: 55vh;
    width: 95vw;   
    outline: 0.1vw dashed orange;
}

.paragraph-class {
    font-size: 5vw;
    position: absolute;
    white-space: pre-wrap; 
    font-family: 'Open Sans', sans-serif;  
    font-weight:400;
    color: #595959;
}

<!DOCTYPE html>
<html>
<head>

  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css"> 

</head>

<body> 

<div id = "pc" class="paragraphContainer"> 
<div id="paragraph" class="paragraph-class"></div>
</div>


<!-- <button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", function(){
  Read();
});
</script> -->


<script src="script.js"></script>
</body>

</html>