var results = document.querySelector(".results");

function countLines() {
  //Recupero dei dati e generazione delle variabili
  var item = document.querySelector(".myText");
  var myWidth = item.offsetWidth;
  var myString = item.innerHTML;

  //Popolamento dell'array:
  var myChars = myString .split(" ");
  for (let i=0; i<myChars.length; i++) {
    myChars[i] += " ";
    myChars[i] = myChars[i].split("");   
  }  
 
  let w = getComputedStyle(item).fontWeight;
  let s = getComputedStyle(item).fontSize;
  let f = getComputedStyle(item).fontFamily;
  var font = w.concat(" ",s," ",f);
  
  let letterWidth = getTextWidth("a", font);
  
  let measure = 0;
  
  for(let i=0; i<myChars.length; i++) {
        for(let j=0; j<myChars[i].length; j++) {
            
            measure += letterWidth;
            
            if (measure > myWidth){
               measure = 0;
               myChars.splice(i, 0, '\n');
               //i++;
            }   
        }  
    }
  
  
  let arr = [];
  for(let i=0; i<myChars.length; i++) {
    for(let j=0; j<myChars[i].length; j++) {
      arr.push(myChars[i][j]);
    }
  }
  let t = arr.join('');  
  let splitLines = t.split('\n');
   
  results.innerHTML = 'Il paragrafo ha: <b>' + splitLines.length + '</b> righe.' + '<br/>' + 'Il contenuto della <b>seconda</b> riga è:<br/><em>' + splitLines[1]; + '</em>'
}

function clearResults() {
  results.innerHTML = '';  
}

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;
}