Truncar Texto Multilinha
index.html e style.css já foram fornecidos na VM.
Para truncar texto que é maior que uma linha, siga estes passos:
- Use
overflow: hidden para evitar que o texto transborde suas dimensões.
- Defina uma
width fixa de 400px para garantir que o elemento tenha pelo menos uma dimensão constante.
- Defina
height: 109.2px calculado a partir do font-size, usando a fórmula font-size * line-height * numberOfLines (neste caso, 26 * 1.4 * 3 = 109.2).
- Adicione a classe
truncate-text-multiline ao elemento p no seu HTML.
- Defina
font-size: 26px e line-height: 1.4 no CSS para a classe .truncate-text-multiline.
- Defina
color: #333 e background: #f5f6f9 para estilizar o texto.
- Para criar um gradiente de
transparent para o background-color, adicione as seguintes regras CSS ao pseudo-elemento .truncate-text-multiline::after:
.truncate-text-multiline::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 150px;
height: 36.4px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
}
Isso criará um contêiner de gradiente com uma altura de 36.4px, calculado para o contêiner de gradiente, com base na fórmula font-size * line-height (neste caso, 26 * 1.4 = 36.4). O pseudo-elemento ::after é posicionado no canto inferior direito do elemento .truncate-text-multiline.
Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.
