Javascript 文本不会保留在边界中

为其写入文本的div元素是有界的，但文本仍然扩展了边界，而不是下一行。如何通过不手动插入

来防止这种情况

document.getElementById（'commentContent'）.innerHTML=“aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
.div模式{
宽度：100%；
身高：100%；
/*大小：10雷姆*/
溢出：隐藏；/*其中的任何内容都不会超过此div的维度*/
背景色：rgba（0,0,0,0.7）；
位置：固定；/*使其相对于浏览器窗口*/
排名：0；
显示器：flex；
/*显示：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）*/
证明内容：中心；
对齐项目：居中；
过滤器：模糊（0px）；
}
.div内容{
背景色：#F4；
宽度：600px；
高度：550px；
边界半径：6px；
文本对齐：居中；
填充：18px；
填充顶部：13px；
边际上限：0px；
位置：绝对；/*通过上/左/右/下控制其位置以使其适合*/
顶部：30px；
}
#评论内容{
利润率：30像素；
边缘顶部：50px；
右边距：50px；
高度：300px；
证明内容：中心；
对齐项目：居中；
}

&时代；

考虑使用空格，或使用
换行：打断单词


document.getElementById（'commentContent'）.innerHTML=“aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
.div模式{
宽度：100%；
身高：100%；
/*大小：10雷姆*/
溢出：隐藏；/*其中的任何内容都不会超过此div的维度*/
背景色：rgba（0,0,0,0.7）；
位置：固定；/*使其相对于浏览器窗口*/
排名：0；
显示器：flex；
/*显示：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）*/
证明内容：中心；
对齐项目：居中；
过滤器：模糊（0px）；
}
.div内容{
背景色：#F4；
宽度：600px；
高度：550px；
边界半径：6px；
文本对齐：居中；
填充：18px；
填充顶部：13px；
边际上限：0px；
位置：绝对；/*通过上/左/右/下控制其位置以使其适合*/
顶部：30px；
}
#评论内容{
利润率：30像素；
边缘顶部：50px；
右边距：50px；
高度：300px；
证明内容：中心；
对齐项目：居中；
换行：打断单词
}

&时代；

我是这样解决的：

#commentContent{
    margin: 30px;
    margin-top: 50px;
    margin-right: 50px;
    height: 300px;
    word-break: break-word;
    text-align: left;
}

这里，'word-break'将打断内部div（#commentContent）中的长行

•您可以使用文本对齐：左来对齐内部内容，而不是使用：

justify-content: center;
align-items: center;

只需使用真实文本，即真实单词-它们由空格分隔，这些将导致换行