Break line correctly in a List with Data Binding AngularJS

Navigation
0

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

Example:

Hereisthecode:

<divclass="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 sort this list?

OBS: I am doing CSS Inline for testing.

    
asked by anonymous 26.11.2015 / 14:41

2 answers

3

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

Can i use word-break?

Reference: MDN - word-break

    
26.11.2015 / 15:00
1

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 being thus exceeding that value would be inserted a tag 

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

This would be an alternative to getting this text break.

    
26.11.2015 / 14:56
Additional measures to avoid SQL injection attacks are really necessary? Put a datepicker in a mvc 5 view with jquery or similar