我将一个名为 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 标签仅用于文本颜色和对齐,并确保有分页符。当我运行代码时,我输入的文本表现正常,只是一直向右移动。
最佳答案
Textarea 不接受太多格式化方式。为布局提供的唯一控件是换行符。您不能将 DIV 插入文本区域。 DIV 是一个 DOM 元素。 Texboxes 只接受文本 - 不接受 DOM 元素。
使用\n 换行符将文本分成文本区域内的多行。
关于javascript - div 标签不会换行文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50608669/