Text overflow from the div tag-CodePudding

Encountered a problem with text overflow from a div tag. I am trying to make a web app that will eradicate all the spaces from the text, and I have successfully completed the logic and the code is running fine. However, the problem is with the design.The p tag which is enclosed in a div tag to which the edited text is forwarded displays the text but overflows the viewport and brings a scroller on to it.(The code runs only for one line text as soon as the line exceeds the layout breaks.)

Solution's I have tried :

Tried resizing the div tag.
Tried resizing the p tag.
Tried to alter the no of the elements that go for the whitespace editing(for ex 100 characters).So that the code remains in one line.(Works only for one line text).

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 >
    <h1>White Space Remover</h1>

    <div >
      <h2>Enter The Text Here : </h2>
      <input  type="text" name="" value="">
      <br>
      <button type="button"  name="button">Submit</button>
      <h2>Your Edited Text Is Here : </h2>
    </div>

    <div >
      <p></p>
    </div>
  </div>

  <script src="index.js" charset="utf-8"></script>
</body>

</html>

CodePudding user response：

There are no spaces in the output text, so the p tag will not function in the typical way. Normally, linebreaks are substituted for spaces so that the text will fit the width of the container. When there are no spaces this does not happen. If you don't want the horizontal scrollbar to appear then you can use p{overflow-x:hidden} Alternatively, you can use JS to insert a <br> tag to the output every x characters like this:

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("");

CodePudding user response：

To ensure the system shows all the text, regardless of how long it is or how wide the p element, you can get CSS to break in the middle of a word (the 'word' being all of your text in this case).

Here's a simple demo:

p {
  overflow-wrap: break-word;
}

<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>

This method has the advantage that you aren't having to add spurious line breaks into your text.