text-overflow with line break

Question

I’m trying to use the text-overflow property to use lattices but also wanted to use line breaks in the first line.

I need you to have a line break in the first line and in the second use reticence. Something like:

quebra de texto 
quebra de ...

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

Can someone help me?

Answer 1

[...] You can do this using the -webkit-box and -webkit-line-clamp- Example http://jsfiddle.net/ArKeu/7/

Link to the original solution in English: https://stackoverflow.com/questions/7004006/is-vertical-text-overflow-possible-with-css3

Answer 2

I have a solution in Javscript that I found simpler and that worked in my case because with CSS was not working. Basically I did so:

1. I created an HTML element

   const figcaption = Document.createelement('figcaption')

2. In the text insert the string

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

3. I limited it to 55 characters, removed spaces and concatenated the ellipsis

   figcaption.innerHTML = bio.substr(0, 55). Trim(). Concat('...');

4. I added figcaption to the 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>