Limit length of a text

If I'm not wrong, every paragraph has the property white-space: with the attribute normal by default so there would be no problem, because that's how you create a jump when you reach the maximum width.

On the other hand, the nowrap attribute causes everything to remain as it is, without line breaks. Anyway, I present two solutions:

The first is parrafo1() that is based on white-space: normal

The second one is parrafo2() that is based on placing a line break every 40 characters (they are the ones that on average I could notice that they occupy the 300px).

function main(){
	var texto = prompt("Ingresa el texto: ");
	if (!texto)
		texto = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?";
	return texto;
}
function parrafo1(){
	var texto = main();
	var p = document.createElement("p");
	p.textContent = texto;
	document.getElementsByTagName("div")[0].appendChild(p);
}
function parrafo2(){
	var texto = main(), auxiliar = [];
	for (var i = 40; i < texto.length; i+=40){
		auxiliar.push(texto.substring(i-40, i));
		auxiliar.push("<br />");
	}
	auxiliar = auxiliar.join("");
	document.getElementsByTagName("div")[0].innerHTML = auxiliar;	
}

	div{
		width:300px;
		height:200px;
		overflow-y:scroll;
	}
	/*div p{
		white-space: nowrap;
	}*/

<div></div>
<button onclick="parrafo1()">Click</button>

In CSS remove the comment to appreciate the difference in line breaks. Also change the parrafo1() button by parrafo2() to try one method or another.

You could use one of these two CSS properties:

• word-break (with the value break-all ): indicates whether the browser should include line breaks where the word exceeds the size of the container.
• overflow-wrap (with the value break-word ): indicates whether the browser should include Line breaks within a word if you are going to exceed the size of the container.

As you can see, the two are quite similar. The main difference is that overflow-wrap will only create the line break within a word if the whole word does not enter a line (if not, the jump will put it in the space with the previous word), which makes the sentences Be more "natural" by not breaking the words unless it is strictly necessary.

Instead break-word will break the word when it reaches the end of the line, regardless of whether it would have entered the entire line (giving a justified alignment effect, but breaking the words less naturally).

One problem is that it is not supported by the Edge browser (neither, nor overflow-wrap nor word-break ) and that many mobile browsers do not support well word-break (visit links to see support tables).

Here you can see an example:

document.querySelector("button").addEventListener("click", function() {
  var texto = prompt("Escribe algo");
  var p = document.createElement("P");
  var t = document.createTextNode(texto);
  p.appendChild(t);
  document.getElementById("div").appendChild(p);
});

#div {
  width: 300px;
  height: 200px;
  overflow-y: scroll;
  border:1px solid gray; /* para visualizar mejor la caja */
  overflow-wrap: break-word;
}

<button>Agrega texto</button>
<div id="div"></div>