How to remove New Line Breaks from Knockout html binding?

Question

So currently I have a foreach loop that pulls in a list of messages, like a message center, where it shows the date/computed short subject/computed short message/status. So when it pulls in the short message I have it displayed as HTML since it's a message from an HTML Editor. But when it displays it displays with all the spaces and whatever else is in the message until it hits 25 characters.

How would I either remove the newline breaks from the html message upon adding it to the foreach loop? Or if I switched it over to the knockout text binding, remove the html characters and replace with a space?

Knockout:

 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>

Show us what your data looks like, and what your code looks like. — Roy J
– Roy J, Commented Dec 28, 2015 at 19:37

Community · Accepted Answer · 2017-05-23 11:52:04Z

0

The problem with truncating HTML is that you might have unclosed tags in it which could destroy the formatting of your page. So you probably want to just extract the text, which this answer tells you how to do.

If you feel confident that your table cells won't break with the HTML you're going to get, you can set the displaystyle for everything inside a cell to 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>

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Dec 29, 2015 at 0:27

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to remove New Line Breaks from Knockout html binding?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related