使用innerHTML

Question

在Angular 5 app中，我需要从数据库中显示一些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'分为2行。

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

我怎样才能做到这一点？

Answer 1

您可以添加CSS：

MyOtherStruct

as

word-wrap: break-word;

或尝试将css添加到您的组件中：

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

演示：

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

Answer 2

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

上面的CSS就是您所需输出所需的全部内容。另外，您还应该看看overflow-wrap这篇文章非常好地解释overflow-wrap以及两者之间的区别。

Answer 3

.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;
}

尽管“自动换行：断词”在元素文本引起溢出（弯曲增长）时会起作用，但它会被截断，因此在事件中使用上述方法可以实现