div 标签的文本溢出

Question

div 标签出现文本溢出问题。我正在尝试制作一个网络应用程序来消除文本中的所有空格，并且我已经成功完成了逻辑并且代码运行很好。但是，问题在于 design.The p 标签，它包含在 div 标签 中，已编辑的文本转发到该标签显示文本但溢出视口并且在其上添加一个滚动条。（一旦该行超过布局中断，该代码仅针对一行文本运行。）

我试过的解决方法：

已尝试调整 div 标签的大小。
已尝试调整 p 标签的大小。
尝试更改用于空白编辑的元素编号（对于前 100 个字符）。以便代码保留在一行中。（仅适用于一行文本）。

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>

Answer 1

输出文本中没有空格，因此 p 标签将无法正常工作。通常，换行符代替空格，以便文本适合容器的宽度。当没有空格时，这不会发生。如果您不希望出现水平滚动条，则可以使用 p{overflow-x:hidden} 或者，您可以使用 JS 在输出中插入一个 <br> 标记，每隔 x 个字符，如下所示：

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

Answer 2

为确保系统显示所有文本，无论文本多长或 p 元素多宽，您可以 CSS 在单词中间中断（'word'在这种情况下是您的所有文本）。

这是一个简单的演示：

p {
  overflow-wrap: break-word;
}

<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>

这种方法的优点是您不必在文本中添加虚假的换行符。

div 标签的文本溢出

Text overflow from the div tag

html

javascript

css

web