3

Estou tentando usar a propriedade text-overflow para usar reticencias mas também queria usar quebra de linha na primeira linha.

Preciso que a tenha uma quebra de linha na primeira linha e na segunda usar reticencias. Algo parecido com:

quebra de texto 
quebra de ...

https://jsfiddle.net/tmk3546b/3/

inserir a descrição da imagem aqui

Alguém pode me ajudar?

2 Respostas 2

2

[...] Você pode fazer isso usando o -webkit-box e -webkit-line-clamp- Exemplo http://jsfiddle.net/ArKeu/7/

Link da solução original em inglês: https://stackoverflow.com/questions/7004006/is-vertical-text-overflow-possible-with-css3

0

Eu tenho uma solução em JavScript que achei mais simples e que funcionou no meu caso porque com CSS não tava funcionando. Basicamente eu fiz assim:

  1. Criei um elemento HTML

    const figcaption = document.createElement('figcaption')

  2. No texto inseri a string

    const bio = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'

  3. Limitei em 55 caracteres, removi espaços e concatenei as reticências

    figcaption.innerHTML = bio.substr(0, 55).trim().concat('...');

  4. Adicionei o 'figcaption' na figure

    figure.appendChild(figcaption);

const figure = document.querySelector('.figure');
const figcaption = document.createElement('figcaption');
const bio = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
figcaption.innerHTML = bio.substr(0, 55).trim().concat('...');
figure.appendChild(figcaption);
<figure class="figure"></figure>

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 .