Se encontró un problema con el desbordamiento de texto de una etiqueta div. Estoy tratando de crear una aplicación web que elimine todos los espacios del texto, he completado con éxito la lógica y el código funciona bien. Sin embargo, el problema está en el diseño. La etiqueta p que está encerrada en una etiqueta div a la que se reenvía el texto editado muestra el texto pero desborda la ventana gráfica y trae un desplazamiento hacia ella. (El código se ejecuta solo para una línea de texto tan pronto como la línea exceda los cortes de diseño.)
Soluciones que he probado:
let text1 = document.querySelector('input'); let btn = document.querySelector('button'); let text2 = document.querySelector('p'); function array(input){ let arr = []; var j = 0; for(let i = 0; i <= input.length ; i++){ if(input[i] != ' '){ arr.push(input[i]); } } return arr; } btn.addEventListener('click',function(){ let nospace = array(text1.value).join(''); text2.innerHTML = nospace; }); <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Code Minimizer</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="index.css"> </head> <body> <div class="containerfull"> <h1>White Space Remover</h1> <div class="contanerquote1"> <h2>Enter The Text Here : </h2> <input class="form-control" type="text" name="" value=""> <br> <button type="button" class="btn btn-success" name="button">Submit</button> <h2>Your Edited Text Is Here : </h2> </div> <div class="containerquote2"> <p></p> </div> </div> <script src="index.js" charset="utf-8"></script> </body> </html>No hay espacios en el texto de salida, por lo que la etiqueta p no funcionará de la forma habitual. Normalmente, los saltos de línea se sustituyen por espacios para que el texto se ajuste al ancho del contenedor. Cuando no hay espacios esto no sucede. Si no desea que aparezca la barra de desplazamiento horizontal, puede usar p{overflow-x:hidden} Alternativamente, puede usar JS para insertar una etiqueta <br> en la salida cada x caracteres como este:
letters = "hellohellohellohellohellohellohello" letters = letters.split("") newLetters = [] linebreak = 5 for (var i = 0; i < letters.length; i++) { newLetters.push(letters[i]) if (i % linebreak == 0){ newLetters.push("<br>") } } newLetters = newLetters.join("");Para asegurarse de que el sistema muestre todo el texto, independientemente de la longitud o el ancho del elemento p, puede hacer que CSS se rompa en medio de una palabra (en este caso, la 'palabra' es todo el texto).
Aquí hay una demostración simple:
p { overflow-wrap: break-word; } <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p>Este método tiene la ventaja de que no tiene que agregar saltos de línea falsos en su texto.