Creating new line using knockout text

Question

I am creating SPA. I am using knockout and observable array to iterate json array. Sometimes i've got br tag inside text, and using data-bind="text: myVar" I would like to brek line. Problem is, br tags wont work, because i can see <br /> except new line. My question is: how can I force knockout data-bind to create new line using this br tags from json data?. I was trying to use "white-space: pre-wrap", but didn't work.

Tanner · Accepted Answer · 2015-03-27 12:10:04Z

7

You just need to bind using html: instead of text: and it will process the <br />.

Run the below snippet:

var viewModel = {
  myVal: ko.observable('First Line <br />Second Line <br />Third Line')
};

ko.applyBindings(viewModel);

* {
  font-family: Arial;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h2>Text Binding:</h2>
<span data-bind="text: myVal"></span>
<h2>HTML Binding:</h2>
<span data-bind="html: myVal"></span>

answered Mar 27, 2015 at 12:10

Tanner

22.8k9 gold badges70 silver badges89 bronze badges

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

Collectives™ on Stack Overflow

Creating new line using knockout text

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related