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