javascript - div 标签不会换行
问题描述
我将一个名为 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 并确保有分页符。当我运行代码时,我输入的文本表现正常,只是一直向右移动。
解决方案
Textarea 不接受太多的格式化方式。您对布局的唯一控制是换行符。您不能将 DIV 推入文本区域。DIV 是一个 DOM 元素。Texboxes 只接受文本 - 不接受 DOM 元素。
使用 \n 换行符将文本分成文本区域内的多行。
推荐阅读
- java - 具有合并单元测试的 Spring Reactive WebClient 不会终止
- sql - 接近 SQL 查询构建
- javascript - React-dnd 与多个 canDrops 通过数组拆分
- powershell - 如何从 powershell 中启动 cmd 并将命令传递给 cmd 实例?
- java - java.text.ParseException:无法解析的日期:“...”
- node.js - 无法将 npm 工件推送到 Gitlab
- c# - 具有属性和祖父属性的元素的 xpath
- powerbi - Dax TotalYTD 包括上一年的值
- kable - 用 Kable 制作的表格,多行少列
- log4j2 - log4j2 - 保留最近 7 天的日志文件