Quebra e exibição de textos longos com AngularJS

Oi pessoal,

Iniciando o desenvolvimento do front-end de um projeto com AngularJS, nos deparamos com algumas situações em que os textos exibidos não se adequavam corretamente ao layout. Acreditamos que essas situações são comuns em outros projetos, portanto, estamos compartilhando a solução adotada.

Encontramos dois cenários em que foi exigido o tratamento para exibição de textos longos:

1. Quebrar a linha para exibir o texto na íntegra;
2. Limitar o tamanho do texto exibido, ocultando parte e inserindo “…” (três pontos).

O primeiro cenário encontrado se aplica a exibição dos textos de campos nas telas de detalhes.
Já o segundo cenário se aplica às listas (consulta), listas dentro das telas de detalhes e de formulário de cadastro/alteração, e no cabeçalho (BreadCrumbs).

Solução para o primeiro cenário:

1) Utilizar a tag <p> para exibição dos textos.

<p class="first-title-detail label-wrap-detail">{{ model.disciplina.nome }}</p>

2) Criar a classe “label-wrap-detail” para a tag <p>.

.eits-content p.label-wrap-detail {
   word-wrap: break-word;
   width: 100%;
}

3) Especificar tamanho no flex do elemento que engloba a tag <p>. Exemplo:

<div flex="90" layout="column" layout-align="start start" layout-padding>
   <p class="first-title-detail label-wrap-detail">{{ model.disciplina.nome }}</p>
   <p class="second-title-detail label-wrap-detail">{{ model.disciplina.nomeReduzido }}</p>
</div>

Solução para o segundo cenário:

1) Definir no contexto do $rootScope (ou em uma controller global) a function substr, a qual espera receber como parâmetro o tamanho limite do texto a ser exibido e o próprio texto a ser formatado e exibido. O retorno da função é o texto formatado.

$rootScope.substr = function (size, value) {
    if (value && value.length > size) {
        return value.substr(0, size) + "...";
    }
    return value;
};

2) Aí é só usar a função onde for necessário, conforme o exemplo. Sugestão: exibir o texto na íntegra na propriedade title do elemento responsável pela exibição do texto.

<td title="{{item.nome}}">{{substr(90, item.nome)}}</td>

Aceitamos sugestões de melhorias para a solução proposta.

Att,

Extreme Ninjas