 <p>One way is with a custom binding handler. </p> <pre><code>ko.bindingHandlers.lineBreaks = { init: function (element, valueAccessor, allBindings, data, context) { $(element).html(value.replace(/-/g, '&lt;br /&gt;')); } }; </code></pre> <p>See <a href="http://jsfiddle.net/rwisch45/t5EqM/3/" rel="nofollow">updated fiddle</a></p> <p>And if the value of the observable might change, then you can add an update section to the binding handler with the same code that is in the init.</p> <pre><code>ko.bindingHandlers.lineBreaks = { init: function (element, valueAccessor, allBindings, data, context) { $(element).html(value.replace(/-/g, '&lt;br /&gt;')); }, update: function (element, valueAccessor, allBindings, data, context) { $(element).html(value.replace(/-/g, '&lt;br /&gt;')); } }; </code></pre> <p>Now the displayed value will be formatted via the binding handler when the value of the observable updates.</p> <p>You can probably achieve the same effect with an <a href="http://knockoutjs.com/documentation/extenders.html" rel="nofollow">extender</a> as well.</p>