0

Tenho uma lista de comentários onde exibo alguns dados. Porém quando o comentário é muito grande a lista fica estranha pois a quebra de linhas não acontece corretamente.

Exemplo: inserir a descrição da imagem aqui

Aqui está o código:

<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>

Como posso arrumar essa lista?

OBS: Estou fazendo CSS Inline para testes.

2

2 Respostas 2

3

Utilizando o atributo css word-break: break-all; você consegue quebrar as linhas do comentário.

Can i use word-break?

Referência: MDN - word-break

1
  • Obrigado, funcionou perfeitamente. 26/11/2015 às 15:12
1

Ao invés de apenas inserir o seu dado diretamente no seu <i> , você poderia criar um div, e pré-determinar seu tamanho, feito isto poderia utilizar um javascript para contar o tamanho do textos sendo assim ao exceder esse valor fosse inserido uma tag

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

Esta seria uma alternativa para conseguir realizar essa quebra de texto.

2
  • Essa verificação não é uma forma adequada de fazer isso. Imagine se tiver muitos comentários? Tela de diferentes resoluções?
    – Randrade
    26/11/2015 às 14:05
  • De fato, mas ao meu ver está seria a forma mais simples, que pode ser facilmente manipulada por media querys e alguns "ifs" de verificação do width 26/11/2015 às 14:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .