使用 innerHTML 时换行文本

Posted 2023-05-07

【中文标题】使用 innerHTML 时换行文本

【英文标题】：Wrap text when using innerHTML

【发布时间】：2018-09-10 08:54:30

【问题描述】：

在 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”位于 2 行中。

我想为整个单词换行，而不是为了换行而打断单词。在这种情况下，'the' 应该在下一行。

我怎样才能做到这一点？

【问题讨论】：

我认为您使用的角度无关紧要，似乎是一些 css 在起作用。我的猜测是你在某处有一个word-break: break-all 或类似的东西。

同意@HenrikKarlsson 问题与框架无关，但您正在寻找的不是word-break: break-all，而是word-wrap: break-word;。这是一些非常基本的 CSS。

【参考方案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

【讨论】：

谢谢。我不是在寻找 nowrap。我想将文本包装起来，但它应该以不破坏文字的方式包装。在上面的例子中，'the' 应该在下一行，而不是在'he' 处中断。所以应该包装完整的单词。如果我使用 nowrap，那么所有的包装都会消失，我会得到一个我不想要的大滚动条。

我已经更新了word-wrap: break-word;，@Naresh Pingale 评论看起来不错

没有帮助。我添加到 CSS td div word-wrap: break-word; 然后在 HTML

但是，它仍然在字母处中断。

我不知道从数据库中返回什么HTML，所以没有把CSS放在ul li上。相反，它是在 td div 上进行的（它总是在那里）。不要认为这应该有所作为

我使用word-wrap: break-all; 解决了我同样的问题。

【参考方案2】：

ul li 
    word-wrap: break-word;

上面的 CSS 就是您想要的输出所需的全部内容。或者你也应该看看overflow-wrap这篇文章很好地解释了overflow-wrap以及两者之间的区别。

【参考方案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;

虽然“word-wrap: break-word”在元素文本导致溢出（弹性增长）时有效，但它会被截断，因此在该事件中使用上述方法

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常质量更高，更有可能吸引投票。