javascript - 使用 innerHTML 时换行

Question

在 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”应该在下一行。

我怎样才能做到这一点？

Answer 1

你可以添加一个CSS:

word-wrap: break-word;

作为

<li style="white-space: nowrap;">These documents needs to be tested and reviewed. Please check the details.</li>

或者尝试向您的组件添加一个 css:

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

演示:

https://stackblitz.com/edit/angular-5-tutorial-4kghvj?file=app/app.component.css