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

How to remove New Line Breaks from Knockout html binding?

本文关键字：删除 换行符 绑定 html Knockout      更新时间：2023-09-26

所以目前我有一个foreach循环，它拉入消息列表，就像消息中心一样，在那里它显示日期/计算的短主题/计算的短信/状态。因此，当它插入短消息时，我会将其显示为HTML，因为它是来自HTML编辑器的消息。但当它显示时，它会显示所有空格和消息中的其他内容，直到它达到25个字符。

在将html消息添加到foreach循环时，我将如何从该消息中删除换行符？或者，如果我把它切换到敲除文本绑定，删除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>

截断HTML的问题是其中可能有未关闭的标记，这可能会破坏页面的格式。所以你可能只想提取文本，这个答案告诉你该怎么做

如果您确信您的表单元格不会与要获得的HTML发生冲突，那么可以将单元格中所有内容的display样式设置为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>

相关文章：