'Text overflow from the div tag

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 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>
javascripthtmlcssweb


Solution 1:[1]

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.

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 A Haworth
Solution 2 Ned Hulton

Related Questions