Break Line Correctly in a List with Data Binding Angularjs

Question

I have a list of comments where I display some data. But when the comment is too big the list gets strange because the lines break does not happen correctly.

Example:

Here is the code:

<div class="jumbotron">
  <div layout="row" layout-margin>
    <div flex="40">
      <p>Comentários</p>
    </div>
    <div flex="30">
      <md-button type="file" class="md-raised md-primary" style="width:100%;margin-left: 115%;margin-top: -1px;" data-toggle="modal" 
      data-target="#myModal"><i class="fa fa-files-o"></i>
        Novo Comentário</md-button>
      </div>
    </div>
  </br>
</br>
<ul class="list-group" ng-repeat="comentario in comentarios">
  <li class="list-group-item">
    <i class="fa fa-user"></i>
    <b>{{comentario.usuario.login}}</b><i class="fa fa-comment" style="margin-left: 40px;" ></i>{{comentario.comentario}}
    <i class="fa fa-calendar" style="margin-left: 50px;"></i>{{comentario.dataComentario | date: "dd-MM-yyyy HH:mm"}}</li>
  </ul>
</div>

How can I get this list?

OBS: I’m making CSS Inline for testing.

Answer 1

Using the css attribute word-break: break-all; you can break the lines of the comment.

Can i use word-break?

Reference: MDN - word-break

Answer 2

Instead of just entering your data directly into your <i> , you could create a div, and pre-determine its size, done this could use a javascript to count the size of the texts and so when exceeding this value is inserted a tag

if(meutexto.length > 25)
{
  $('.minhalinha').append("<br>");
}

This would be an alternative to achieve this breaking of text.