7

Estou tentando e estou fazendo igual explica na w3schools mas não esta dando certo.

.box {
    width: 250px; 
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Maecenas fermentum   nisi ut auctor posuere. Fusce pulvinar blandit commodo.
 Nulla nunc nunc, ultrices vitae aliquam sit amet, aliquam a metus. Aenean 
semper nisi sed augue elementum tincidunt. Maecenas sit amet magna id lectus
tempor luctus in quis justo. Proin vel iaculis.
</div>

2
  • 2
    Eu estava atrás disso faz um bom tempo e encontrei esse exemplo, caso queira dar uma olhada codepen.io/chriscoyier/pen/iBtep Commented 28/03/2017 às 16:34
  • 1
    Obrigado, muito bom esse exemplo e funcional, mas p/ o meu caso eu so posso fazer alteração no css acredito que o exemplo do @Ack Lay vai me atender melhor mas a sua solução pode ajudar outros usuarios, parabens Commented 28/03/2017 às 17:12

4 Respostas 4

8

Além do text-overflow: ellipsis, você ainda deve usar a propriedade white-space, que define como o espaço em branco dentro de um elemento é manipulado. Também a propriedade overflow como hidden, que especifica quando o conteúdo de um elemento de nível de bloco deve ser cortado. Veja como deve ficar seu código:

.box { 
max-width: 250px;
font-size: 20dp;
white-space: nowrap;                  
overflow: hidden; /* "overflow" value must be different from "visible" */
text-overflow:    ellipsis;
border: 1px solid #ccc;

}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Maecenas fermentum   nisi ut auctor posuere. Fusce pulvinar blandit commodo.
 Nulla nunc nunc, ultrices vitae aliquam sit amet, aliquam a metus. Aenean 
semper nisi sed augue elementum tincidunt. Maecenas sit amet magna id lectus
tempor luctus in quis justo. Proin vel iaculis.
</div>

Também é possível fazer multilinhas usando o webkit. Veja abaixo um exemplo com 3 linhas:

.box { 
  display: block; 
  display: -webkit-box;
  max-width: 250px;
  font-size: 20dp;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ccc;
}
<div class="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Maecenas fermentum   nisi ut auctor posuere. Fusce pulvinar blandit commodo.
     Nulla nunc nunc, ultrices vitae aliquam sit amet, aliquam a metus. Aenean 
    semper nisi sed augue elementum tincidunt. Maecenas sit amet magna id lectus
    tempor luctus in quis justo. Proin vel iaculis.
</div>

5

Para quebrar na primeira linha você precisa adicionar as seguintes propriedades também:

{
  white-space: nowrap;
  overflow: hidden;
}

Caso o contrário o seu texto vai quebrar para a linha de baixo e continuar infinitamente.

2
  • Ok certo... mas nao da para eu usar os 3 pontos na terceira linha do texto...ou seja esse recurso é somente para a primeira linha ? Commented 28/03/2017 às 3:00
  • Depois dá primeira linha só com javascript. Esse recurso só funciona na primeira Commented 2/04/2017 às 16:49
4

Seguindo o exemplo que menciona, ficou faltando 2 regras :

.box {
        width: 250px;
        white-space: nowrap; 
        text-overflow: ellipsis;
        overflow: hidden; 
        border: 1px solid #000000;
    }
-2
<style>
    .box {
        width: 250px; 
        text-overflow: ellipsis; 
        border: 1px solid #000000;
    
    /* acrescente */
        overflow: hidden;
        white-space: nowrap;
    }
</style>
<div class="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Maecenas fermentum   nisi ut auctor posuere. 
    Fusce pulvinar blandit commodo. 
    Nulla nunc nunc, ultrices vitae aliquam sit amet, aliquam a metus. 
    Aenean semper nisi sed augue elementum tincidunt. Maecenas sit amet magna id lectus tempor luctus in quis justo. 
    Proin vel iaculis.

</div>

<script>
    function mostrarTituloPor_AllyssonAlvesFrontEnd(){
        var box = document.querySelectorAll(".box");
        for(var i = 0; i< box.length; i++){
            var conteudo = box[i].textContent;
            box[i].setAttribute('title', conteudo);
        }
      };
  
      mostrarTituloPor_AllyssonAlvesFrontEnd();
  
</script>

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 .