text-overflow with line break

Asked

Viewed 460 times

3

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/

inserir a descrição da imagem aqui

Can someone help me?

2 answers

2

0

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>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.