Javascript 使用innerHTML时换行文本

在Angular 5应用程序中，我需要显示数据库中的一些HTML。例如，数据库中的文本可以是

<div><u>Documents and Files</u></div><ul><li>These documents needs to be tested and reviewed. Please check the details.</li></ul>

文件和文件
这些文件需要测试和审查。请查看详细信息。

在应用程序中，它显示为

使用以下代码

<div [innerHTML]="description"></div>

这正如预期的那样有效。唯一的挑战是文本被包裹在单词的中间。在张贴的样本中，“t”和“he”分为两行

我想为整个单词包装文本，而不是为了包装而打断单词。在这种情况下，“the”应该在下一行

如何实现这一点？

您可以添加CSS：

word-wrap: break-word;

作为

演示：

上面的CSS就是您想要的输出所需的全部内容。另外，您还应该仔细阅读这篇文章，它很好地解释了

overflow wrap

以及两者之间的区别

.yourclass {
    overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

---

虽然“word wrap:break word”在元素文本导致溢出（flex grow）时起作用，但它会被截断，因此在这种情况下使用上述方法也会起作用

我认为使用angular与此无关，似乎是一些css在起作用。我猜你有一个

断字：全部断字

或类似的东西。同意@Henrikkarsson的问题与框架无关，而是

断字：全部断字

你要找的是

换字：断字。这是一些非常基本的css。谢谢。我不是在找一个nowrap。我想文字被包装，但它应该得到包装的方式，文字不被打破。在上面的例子中，“the”应该在下一行，而不是在“he”处断开。所以完整的单词应该被包装起来。如果我使用nowrap，那么所有的包装都会消失，我会得到一个我不想要的大滚动条，@Naresh Pingale评论看起来不错，但没有帮助。我添加到CSS td div{word wrap:break word；}中，然后在HTML中，它仍然在字母处中断。我不知道从数据库返回什么HTML，所以没有将CSS放在ulli上。取而代之的是在td div（它将一直存在）。尽管我用了
wrap:break all，但不要认为这会有什么不同
来解决我的问题。请不要只发布代码作为答案，还要解释代码的作用以及它是如何解决问题的。带有解释的答案通常质量更高，更容易吸引选票。
ul li {
    word-wrap: break-word;
}

ul li {
    word-wrap: break-word;
}

.yourclass {
    overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}