CODEWITHSUNDEEP
angularjstwitter-bootstrap
WinchenzoMagnifico
WinchenzoMagnifico

Reputation: 3445

How do i make text start going on a new line with angular/bootstrap?

Write now my message text is all going to be on one single line like this:

I would like it to start wrapping like iPhone text messages, is there anyway to do it programatically? insert br tags every 20 chars? The actual message is the {{message.message}}

enter image description here

<div class="col-md-8 chatWindow">
  <div ng-show="activeFriend">
    <div class="activeFriendBox text-center">Chat with {{activeFriend.name}}</div>

    <div class="messageList" scroll-glue>
      <div class="messages"  
        ng-class="{ 'message-right': message.from === currentUser, 'message-left': message.from !==currentUser }" 
        ng-repeat='message in activeFriend.messages track by $index | orderBy:"timeStamp"'>
        <span 
          ng-class="{ 'messageTextFrom': message.from === currentUser, 'messageTextTo': message.from !==currentUser }"
          ng-click="revokeMessage(message)" class="messageText">{{message.message}} 
        </span>
      </div>
    </div>

    <div class="sendMessage">
      <form ng-submit='sendMessage(messageText)' name='messageForm'>
        <input class="sendMessageInput" type='text' name='message' ng-model='messageText' maxlength="120" required/>
        <input ng-disabled='!messageForm.$valid || !activeFriend.key' type='submit' value='send'/>
      </form>
    </div>

  </div>
</div>[![enter image description here][1]][1]

Upvotes: 0

Views: 940

Answers (2)

Reactgular
Reactgular

Reputation: 54811

I would use a custom filter to split the string every 20 characters.

angular.filter('split',function(){
    return function(str,length) {
       str = str || "";
       length = Math.max(1,~~length);
       return str.match(new RegExp(".{1,"+length+"}","g")).join("<br>");
    }
});

Then you can just use the filter in your template.

    <span 
      ng-class="{ 'messageTextFrom': message.from === currentUser, 'messageTextTo': message.from !==currentUser }"
      ng-click="revokeMessage(message)" class="messageText">{{message.message | split:20}} 
    </span>

Upvotes: 1

buzzsaw
buzzsaw

Reputation: 1486

This can be done with just CSS. Set a width on the container and also use word-break: break-all;

With the break-all, you can be assured that long consecutive strings, like the one in your example, will wrap in the space defined in your style sheet. You may also need to add white-space:normal; but it will all depend on the browsers you are required to support.

Upvotes: 1

Related Questions