Ir para conteúdo
Fórum Script Brasil
  • 0

Não consegui fazer a ellipsis pelo Boostrap e nem pelo CSS


Frank K Hosaka

Pergunta

Para reduzir o espaço da linha do Bootstrap eu usei o CSS line-height:0.

Para não usar o espaço além do previsto, eu não usei o CSS nowrap.

O problema são os textos longos, ele acaba se sobrepondo e tornando ilegível o texto.

Como eu não consegui fazer funcionar o Bootstrap overflow e nem no CSS, eu tive que apelar para o PHP:

<?php
function ellipsis($texto){
    if(strlen($texto)>44){
        return substr($texto,0,44)." ...";} else {
        return $texto;}} ?>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
 rel="stylesheet">
<table style=line-height:0 class='table table-striped w-25 m-auto mt-5'>
    <tr><th><?=ellipsis("Prioridades do Cop-28")?>
    <tr><td><?=ellipsis("Acabar com o uso dos combustíveis fósseis e a queimada 
     na floresta")?>
    <tr><td><?=ellipsis("Acabar com o poder Supremo")?>
    <tr><td><?=ellipsis("Acabar com a reeleição")?>
</table>

 

Captura de tela 2023-12-01 114555.png

Captura de tela 2023-12-01 115819.png

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...