如何在 DIV 包装中制作 innerHTML 而不是从元素中运行的一行

Question

我有这个 HTML 页面使用 div 框，其中添加了文本，而没有空格的长字符串（如 aaaaa 垃圾邮件）会导致文本从 DIV 中溢出，甚至不包含它。

我不希望 overflow: scroll 让 div 变成一个可以滚动的框，我希望它转到下一行。

我尝试了多种解决方案，涉及带有单词 wrap 或 overflow 和 break-word 的属性，但没有奏效。

它必须是我使用的 DIV 元素，我必须放入不同类型的彩色文本，<textarea> 不会让我这样做。它只是将我添加的元素视为字符串，而不是 HTML。

oninput 代码只是在你输入很多字时调整 div 框。

所以;

• 我想制作带有文本的innerHTML 元素以包裹在 div 框中
• 必须是div 元素
• 必须换行，不能滚动。

我当前的代码：

• 当你有一个没有空格的长词时：就从屏幕上消失。
• 适用于“狐狸跳过懒惰的棕色狗”之类的句子

我感觉这是一个 CSS 问题，但我只想说我使用的语言是 Javascript，以防万一。

.myClass {
  height: 30vh;
  width: 80%;
  padding: 10px;
  font-size: 14px;
  text-align: left;
  resize: none;
  margin: auto;
  background-color: gray;
}

div,
span {
  white-space: pre;
  overflow-wrap: break-word;
  word-wrap: break-word;
  display: inline-flex;
}

<div class="myClass" readonly="true" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'>
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>

Answer 1

试试这个。 white-space: pre; 样式可以防止非空格单词中断，因此我将其取出，并添加了 word-break: break-all; 以在所有字符上中断，而不仅仅是空格。

.myClass {
  height: 30vh;
  width: 80%;
  padding: 10px;
  font-size: 14px;
  text-align: left;
  resize: none;
  margin: auto;
  background-color: lightblue;    /* added for example */
}

div,
span {
/*   white-space: pre; */         /* removed */
  overflow-wrap: break-all;
/*  word-wrap: break-word; */     /* removed */
  word-break: break-all;          /* added */
  display: inline-flex;
}

<div class="myClass" readonly="true" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'>QWERTYUIOPASDFGHJKLLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASD
</div>