div 标签不会换行

Question

我将一个名为 chat-message 的 div 附加到一个名为 card-block 的 div 中，但是我希望它能够包装文本以使其不会超出屏幕。我尝试使用 CSS 属性：

var message = document.createElement('div');
message.setAttribute('class', 'chat-message');
message.innerHTML = "<preBot>" + data[x].name + ": " + data[x].message + '</preBot>';
messages.appendChild(message);
messages.insertBefore(message, messages.nextSibling);

.chat-message {
  word-break: break-all;
  width: 400px;
}

<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3 col-sm-12">
      <h1 class="text-center">
        Quick ORDR
        <button id="clear" class="btn btn-warning">Clear</button>
      </h1>
      <div id="status"></div>
      <div id="chat">
        <input type="text" id="username" name="username" class="form-control" placeholder="Enter name..." style="display:none;" wrap="soft">
        <br>
        <div class="card">
          <div id="messages" class="card-block" style="overflow:auto;">

          </div>
        </div>
        <br>
        <textarea id="textarea" name="message" class="form-control" placeholder="Enter message..."></textarea>
        <br />
        <div class="yes" style="display:none;"><button id="yes" class="btn btn-success" display="none">Correct</button> <button id="no" class="btn btn-danger">Incorrect</button> </div>
      </div>
    </div>
  </div>
</div>

prebot 标签仅用于 textcolor 和 justification 并确保有分页符。当我运行代码时，我输入的文本表现正常，只是一直向右移动。

Answer 1

Textarea 不接受太多的格式化方式。您对布局的唯一控制是换行符。您不能将 DIV 推入文本区域。 DIV 是一个 DOM 元素。 Texboxes 只接受文本 - 不接受 DOM 元素。

使用 \n 换行符将您的文本分成文本区域内的多行。