Publicado em 17 de jun.

Reticencias no final de uma div ao invés de quebra de linha

queria saber como q posso fazer para no final de uma div um texto q pode ter no máximo 1 linha tenha reticencias no final dele ao invés de ele começar uma segunda linha

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Bergs· 17 de jun.

vc vai precisar tratar esse texto dinamicamente.

contar quantos caracteres cabe naquela linha e se passar vc adiciona as reticencias.

esse texto vem de algum banco de dados, se for trata ele direto no serve-side.

Douglas Nunes de Mattos· 18 de jun.

não serviria para min. pq caso o usuário mude de resolução não ira ter como sabe, tem q ser exatamente 1 linha

William Bruno· 18 de jun.

uma forma de chegar ao resultado desejado:

<!doctype html>

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>

<style>

.fleft { float: left; }

.nowrap {
 white-space: nowrap;
 width: 200px;
 overflow: hidden;
 display: block;
}

.p1 .nowrap { width: 200px; }
.p2 .nowrap { width: 300px; }
.p3 .nowrap { width: 400px; }
.p4 .nowrap { width: 500px; }
.p5 .nowrap { width: 600px; }

</style>
</head>
<body>
 <p class="p"><span class="nowrap fleft">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, dolor, maxime, eveniet, perferendis magni blanditiis adipisci aliquam possimus fugiat pariatur tempora ipsa ratione quaerat vero autem ipsum itaque? Provident, qui.</span> ...</p>

 <p class="p p2"><span class="nowrap fleft">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, dolor, maxime, eveniet, perferendis magni blanditiis adipisci aliquam possimus fugiat pariatur tempora ipsa ratione quaerat vero autem ipsum itaque? Provident, qui.</span> ...</p>

 <p class="p p3"><span class="nowrap fleft">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, dolor, maxime, eveniet, perferendis magni blanditiis adipisci aliquam possimus fugiat pariatur tempora ipsa ratione quaerat vero autem ipsum itaque? Provident, qui.</span> ...</p>

 <p class="p p4"><span class="nowrap fleft">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, dolor, maxime, eveniet, perferendis magni blanditiis adipisci aliquam possimus fugiat pariatur tempora ipsa ratione quaerat vero autem ipsum itaque? Provident, qui.</span> ...</p>

 <p class="p p5"><span class="nowrap fleft">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, dolor, maxime, eveniet, perferendis magni blanditiis adipisci aliquam possimus fugiat pariatur tempora ipsa ratione quaerat vero autem ipsum itaque? Provident, qui.</span> ...</p>
</body>
</html>note que fiz 5 parágrafos de larguras diferentes para mostrar q está flexível.

Douglas Nunes de Mattos· 18 de jun.

Perfeito cara, exatamente o que estava procurando, muito obrigado mesmo!!!

Marcus Morais· 20 de nov.

Para acrescentar reticências direta e automaticamente pelo CSS, basta acrescentar text-overflow:ellipsis na classe nowrap.