<div ng-app>
    <div ng-controller='SampleCtrl' class="wrapper">
      <div class="container">
        ng-bind multi line text sample
        <textarea ng-model="multiLineText" placeholder="Input multi line text here."></textarea>
      </div>
        
      <div class="container">
        normal
        <div class="box" ng-bind="multiLineText"></div>
      </div>
        
      <div class="container">
        white-space: nowrap;
        <div class="box nowrap" ng-bind="multiLineText"></div>
      </div>
        
      <div class="container">
        white-space: pre;
        <div class="box pre" ng-bind="multiLineText"></div>
      </div>
        
      <div class="container">
        white-space: pre-wrap;
        <div class="box pre-wrap" ng-bind="multiLineText"></div>        
      </div>
        
      <div class="container">
        white-space: pre-line;
        <div class="box pre-line" ng-bind="multiLineText"></div>
      </div>
    </div>
</div>
.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.container {
  margin: 10px 50px;
}
.box {
  border: 1px solid red;
  width: 200px;
  min-height: 100px;
  margin: 5px 0 20px;
  word-break: break-all;
}
.nowrap {
  white-space: nowrap;
}
.pre-line {
    white-space: pre-line;
}
.pre {
    white-space: pre;
}
.pre-wrap {
    white-space: pre-wrap;
}
textarea {
    width: 300px;
    height: 100px;
    margin-bottom: 20px;
    display: block;
}
function SampleCtrl($scope) {
    $scope.multiLineText = 'super sample text\nwhite space ->          <-\n\naaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
}
Rerun