使用innerHTML时文本自动换行
使用innerHTML时文本自动换行
提问于 2018-03-31 23:16:19
在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‘应该在下一行。
我如何才能做到这一点？
回答 3
Stack Overflow用户
发布于 2018-03-31 23:19:41
您可以添加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
Stack Overflow用户
发布于 2018-03-31 23:44:19
ul li {
word-wrap: break-word;
}上面的CSS就是你想要的输出。另外，您还应该了解一下overflow-wrap，这篇文章很好地解释了overflow-wrap以及两者之间的区别。
Stack Overflow用户
发布于 2020-04-11 13:23:45
.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;
}尽管如果元素文本导致溢出(flex grow)，"word-wrap: break-word“可以工作，但它会被截断，所以在这种情况下使用上面的方法也是有效的
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49589267
复制相关文章
相似问题
腾讯云开发者
