Textarea preview

Question

I have a problem regarding textarea and text previewing. It doesn't recognize Enter button as a newline character. Any ideas how to make this previewing correctly?

EDIT :

I want this text automatically change line when it's not fitting instead of h-scroll.

Answer :

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Answer 1

You can use <pre> tag while printing text from textarea it will reflect all your new lines as it is entered text in textarea

Just use <pre> before content.eg

<pre> Text Content From text Area</pre>

Answer 2

http://plnkr.co/edit/gZM1173PNweJzcBEutTw?p=preview

You need to use ngSanitize and allow you parameter to accept html entry with $sce.trustAsHtml();

html

<textarea ng-model="text" ng-change="change()"></textarea>
<p ng-bind-html='text'></p>

js

$scope.change = function(){ 

    $scope.text = $sce.trustAsHtml($scope.text);
}

css

{white-space: pre}

You'll be able to render and save your text with newline