如何从 Knockout html 绑定中删除换行符？答案

【问题标题】：How to remove New Line Breaks from Knockout html binding?如何从 Knockout html 绑定中删除换行符？
【发布时间】：2015-12-28 16:43:05
【问题描述】：

因此，目前我有一个 foreach 循环，它可以提取消息列表，例如消息中心，其中显示日期/计算的短主题/计算的短消息/状态。因此，当它拉入短消息时，我将其显示为 HTML，因为它是来自 HTML 编辑器的消息。但是当它显示时，它会显示所有空格以及消息中的任何其他内容，直到达到 25 个字符。

在将 html 消息添加到 foreach 循环后，如何从 html 消息中删除换行符？或者如果我将它切换到敲除文本绑定，删除 html 字符并替换为空格？

淘汰赛：

 self.ShortSubject = ko.computed(function () {
        if (self.Subject().length < 20) {
            return self.Subject();
        }
        else {
            return self.Subject().substring(0, 20) + '...';
        }
    });

    self.ShortMessage = ko.computed(function () {
        if (self.Message().length < 50) {
            return self.Message();
        }
        else {
            return self.Message().substring(0, 50) + '...';
        }
    });

HTML：

<table class="table table-hover table-striped table-bordered text-center">
                            <thead>
                                <tr class="bg-success">
                                    <th width="15%" class="table-title" data-bind="click: sortMessageType" style="cursor: pointer">Message Type </th>
                                    <th width="25%" class="table-title" data-bind="click: sortSubject" style="cursor: pointer">Subject </th>
                                    <th width="40%" class="table-title" data-bind="click: sortMessage" style="cursor: pointer">Message </th>
                                    <th width="20%" class="table-title" data-bind="click: function(data, event) { sortDateCreated( $data, event ) }" style="cursor: pointer">Date Created </th>

                                </tr>
                            </thead>
                            <tbody data-bind="foreach: VisibleTemplates">
                                <tr>
                                    <td class="mailbox-subject" data-bind="click: function(data, event) { $parent.selectTemplate( $data, event ) }, text: $data.MessageType"></td>
                                    <td class="mailbox-subject" data-bind="click: function(data, event) { $parent.selectTemplate( $data, event ) }, text: $data.ShortSubject"></td>
                                    <td class="mailbox-subject" data-bind="click: function(data, event) { $parent.selectTemplate( $data, event ) }, text: $data.ShortMessage"></td>
                                    <td class="mailbox-subject" data-bind="click: function(data, event) { $parent.selectTemplate( $data, event ) }, text: $data.DateTime"></td>
                                </tr>
                            </tbody>
                        </table>

【问题讨论】：

向我们展示您的数据是什么样的，以及您的代码是什么样的。
将我的代码添加到我的原始帖子中
还有问题数据的样本？

标签： javascript knockout.js data-binding foreach

【解决方案1】：

截断 HTML 的问题是您可能在其中包含未闭合的标签，这可能会破坏页面的格式。因此，您可能只想提取文本，this answer 会告诉您如何操作。

如果您确信您的表格单元格不会与您要获得的 HTML 发生冲突，您可以将单元格内所有内容的 displaystyle 设置为 inline。

.short-message * {
  display: inline;
}

<div class="short-message"><h1>Hi there</h1>
<div>Some Text</div>
<table>
  <tr>
    <td>One</td>
  </tr>
  <tr>
    <td>Two</td>
  </tr>
</table></div>

【讨论】：