Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Douglas Nunes de Mattos

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

Por , em Desenvolvimento frontend

Recommended Posts

Bergs    53

Bergs
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito