CODEWITHSUNDEEP
htmlangularjs
Omkar Dixit
Omkar Dixit

Reputation: 766

How to show the text with Line Breaks

enter image description here

I need to display the text with the line breaks, this is the script

<script>
    var app = angular.module('MyApp', []);
    app.controller('Ctrl', function ($scope) {
        console.log('Controller is executed');
        $scope.btnClick = function () {
            console.log($scope.desc);
        }
        $scope.ShowData = function () {
            $scope.text = $scope.desc;
        }
    });
</script>

And this is the html code

<body ng-controller="Ctrl">
<form>
    <textarea ng-model="desc" cols="105" rows="15"></textarea>
    <button ng-click="btnClick()">Submit</button>
    <button ng-click="ShowData()">Show</button>
</form>
<div ng-bind="text"></div>

Upvotes: 14

Views: 25101

Answers (6)

Akitha_MJ
Akitha_MJ

Reputation: 4294

Just add this to your styles, this works for me

white-space: pre-wrap

HTML

<p class="text-style">{{product?.description}}</p>

CSS

.text-style {
    white-space: pre-wrap;
}

By this text in <textarea>can be display as it's in there with spaces and line brakes

Upvotes: 5

Alex Frolov
Alex Frolov

Reputation: 436

Try render text inside <pre></pre> tag instead of <div>. Or use style="white-space:pre-wrap;" on your div.

Upvotes: 41

Sravan
Sravan

Reputation: 18647

Add a pre tag, <pre></pre>, where you are displaying text.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body ng-app="">

<p>Write something with breaks and check:</p>

<textarea ng-model="myTextarea"></textarea>

<p>The content of the textarea is;</p>
<pre><span>{{myTextarea}}</span></pre>

</body>
</html>

Please run the above code

Here is a working DEMO

Upvotes: 3

Gaurav verma
Gaurav verma

Reputation: 729

Add style on your css

  <body ng-controller="Ctrl">
    <form>
        <textarea ng-model="desc" cols="105" rows="15"></textarea>
        <button ng-click="btnClick()">Submit</button>
        <button ng-click="ShowData()">Show</button>
    </form>
    <div ng-bind="text" class="line-break"></div>

<style>
    .line-break {
    width: 90px; //Give some width accoring you
    overflow-wrap: break-word;
    }
 </style>

Upvotes: 0

Sachet Gupta
Sachet Gupta

Reputation: 837

use:

<script>
    var app = angular.module('MyApp', []);
    app.controller('Ctrl', function ($scope) {
        console.log('Controller is executed');
        $scope.btnClick = function () {
            console.log($scope.desc);
        }
        $scope.ShowData = function () {
            $scope.text = $scope.desc.replace(/\r?\n/g, '<br />');
        }
    });
</script>

line breaks (\n\r?) are not the same as HTML < br /> tags

Upvotes: 0

meziantou
meziantou

Reputation: 21337

Use the right CSS. The default style of the pre tag preserves line breaks:

<pre>{{text}}</pre>

or you can use CSS (white-space):

div {
    white-space: pre; /* or pre-wrap or pre-line */
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/white-space */
}

Upvotes: 11

Related Questions