Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

Textarea在格式化方面不太受欢迎。您为布局提供的唯一控件是换行符。您无法将DIV推入文本区域。 DIV是DOM元素。 Texboxes只接受文本 - 而不是DOM元素。

使用\ n换行符将文本分成textarea中的多行。

div标签不会包装文本

1 个答案: