How can i break sentence into 2 lines only after specific word with css or (angular)javascript

Question

my code is here:

<p>{{comparison}}</p>

$scope.comparison = date_range

i want to have someting like this only when I have the second value vs. 1988

1988 vs.
2000

Answer 1

You can use ng-bind-html it can bind html code, so you can break your words with <br /> tag.

Documentation : https://docs.angularjs.org/api/ng/directive/ngBindHtml

<p ng-bind-html='comparison'></p>

$scope.comparison = "1988 vs.<br /> 2000"

Answer 2

Try this:

 angular.module('app', []).controller('main', function($scope) { $scope.comparison = "1988 vs. 2000".replace(/vs\\. /, 'vs.\\n'); }); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="main"> <p class="pre">{{comparison}}</p> </div> 

Answer 3

Js with RegEx solution :

 str="1988 vs. 2000" var result = str.replace(new RegExp("vs.", 'gi'), function(match) { return match + "\\n"; }); console.log(result); 

Output :

1988 vs.
2000

It just replaces "vs." with "vs.\\n"