Amigos, normalmente o overflow: hidden; tem um limite de texto pelo tamanho da DIV dele, digamos 100 pixels… exemplo:
.limit {
overflow: hidden;
width:100px;
white-space:nowrap;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="limit">
teste de texto de teste de texto de teste de texto de teste de texto
</div>
É possível obter um resultado semelhante utilizando a unidade ch, não seria exatamente por número de caracteres, mas seria bem próximo. Isso acontece por que a medida é feita pela quantidade de 0 definidas no glyph que gera a fonte. Algo semelhante a isso f039 (usado no FontAwesome) ou assim U+0030.
‘ch’ Relative to width of the “0” (zero)
Devido ao fato de ser medido pelo glyph e não pelo caracter propriamente dito, essa medida pode variar de fonte para fonte, ou seja, pode ser que apenas mudando a fonte do projeto a quantidade de caracteres exibida seja diferente.
Aqui está um exemplo do código:
.limit {
max-width: 15ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="limit">
teste de texto de teste de texto de teste de texto de teste de texto
</div>
Note que p possui uma largura máxima de 15ch, o que faz com que a linha quebre após o 15º 0 obtido na análise do glyph, o restante do código apenas garante que não fique visível essa quebra de linha e que seja adicionado os 3 pontos ao final da linha. Se você não quiser essa exibição dos 3 pontos, basta remover a propriedade text-overflow, porém pode ter um comportamento estranho e quebrar no “meio” da letra.
Com o uso do text-overflow, é possivel quebrar exatamente no caracter, dando uma apresentação melhor (pelo menos nos que testei).
Agora, se você deseja quebrar exatamente no 15º caracter independente de fonte, etc.. Somente com CSS não será possível.
Espero ter ajudado.
Leave A Comment?