Por que as reticências CSS não funcionam na célula da tabela?


150

Considere o seguinte exemplo: ( demonstração ao vivo aqui )

$(function() {
  console.log("width = " + $("td").width());
});
td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

A saída é width = 139:, e as reticências não aparecem.

O que estou perdendo aqui?



De alguma forma duplicada, mas a resposta não fornece uma solução alternativa (como Arlen Cuss faz).
Florian Margaine

1
widthe heightnas células da tabela são sempre usadas como largura e altura mínimas . As células da tabela são diferentes!
Sr. Lister

1
@FlorianMargaine Na verdade, a outra pergunta fornece uma solução alternativa: coloque uma div na célula com a largura desejada.
Sr. Lister

Ainda prefiro as respostas listadas nesta página.
Florian Margaine 29/04

Respostas:


102

Aparentemente, adicionando:

td {
  display: block; /* or inline-block */
}

resolve o problema também.


Outra solução possível é definir table-layout: fixed;a tabela e também defini-la width. Por exemplo: http://jsfiddle.net/fd3Zx/5/


4
Exatamente. Elementos com display: table-cell(o padrão para tdelementos) não aceitam uma largura.
22612 Michael Mior

29
display: block;meio que derrota o propósito de usar uma tabela. Eu gosto da table-layout: fixed;opção, funcionou bem para mim.
Alex K

7
table-layout:fixeddistribui a largura das colunas de uma maneira menos inteligente. Existe outra opção que atribuirá a largura da coluna da mesma maneira table-layout: normale ainda exiba as reticências corretamente?
ninho

Isso estraga a borda da mesa; usando max-width não.
Charlie

84

Também é importante colocar

table-layout:fixed;

Na tabela que contém, também funciona bem no IE9 (se você utiliza largura máxima).


7
Isso também irá certificar-se que as obras texto em excesso em layouts responsivos
jao

3
Isso é exatamente o que eu precisava. Eu tenho a largura da tabela 100%. E todas as colunas, exceto uma com largura fixa. Isso permite que a última coluna ocupe o espaço restante.
precisa

78

Como dito anteriormente, você pode usar, td { display: block; }mas isso anula o propósito de usar uma tabela.

Você pode usar, table { table-layout: fixed; }mas talvez queira que ele se comporte de maneira diferente em algumas colunas.

Portanto, a melhor maneira de conseguir o que você deseja seria agrupar seu texto em um <div>e aplicar seu CSS ao <div>(não ao <td>) desta forma:

td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2
Este é o método mais simples que eu já vi e realmente funciona no IE8.
Keith Ketterer

2
Essa é realmente a melhor solução que eu já vi nas reticências das tabelas.
membersound

41

Tente usar em max-widthvez de width, a tabela ainda calculará a largura automaticamente.

Funciona mesmo em ie11(com o modo de compatibilidade ie8).

td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<table>
  <tbody>
    <tr>
      <td class="max-width-50">Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

jsfiddle .


1
Bem manchado. Provavelmente, é melhor usar os dois , para que o elemento tenha uma largura fixa. Caso contrário, poderia ser mais curto se o conteúdo permitisse.
LSerni

Muito melhor do que exibir hack; Parafuse os parafusos com a borda da mesa.
Charlie

21

Página de demonstração

Para tabelas com largura dinâmica, encontrei o caminho abaixo para produzir resultados satisfatórios. Cada um <th>que deseje ter a capacidade de cortar o texto deve ter um elemento de revestimento interno que envolva o conteúdo da <th>permissão text-overflowpara trabalhar.

O verdadeiro truque é definir max-width(em <th>) em vwunidades .

Isso fará com que a largura do elemento seja "limitada" à largura da janela de visualização (janela do navegador) e resultará em um recorte de conteúdo responsivo. Defina as vwunidades com um valor satisfatório necessário.

CSS mínimo:

th{ max-width:10vw; }
      
th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

Aqui está uma demonstração executável:

table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<table>
    <thead>
        <tr>
            <th>
                <div class="wrap" title="Some long title">Some long title</div>
            </th>
            <th>
                <div class="wrap">Short</div>
            </th>
            <th>
                <div class="wrap">medium one</div>
            </th>
            <th>
                <div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>very long text here</td>
        </tr>
    </tbody>
</table>


3

Apenas oferecer uma alternativa, pois eu tive esse problema e nenhuma das outras respostas aqui teve o efeito desejado que eu queria. Então, em vez disso, usei uma lista. Agora, semanticamente, as informações que eu estava produzindo poderiam ter sido consideradas dados tabulares, mas também dados listados.

Então, no final, o que eu fiz foi:

<ul>
    <li class="group">
        <span class="title">...</span>
        <span class="description">...</span>
        <span class="mp3-player">...</span>
        <span class="download">...</span>
        <span class="shortlist">...</span>
    </li>
    <!-- looped <li> -->
</ul>

Então basicamente ulé table, lié tre spané td.

Então, no CSS, defino os spanelementos como display:block;e float:left;(prefiro essa combinação, inline-blockpois ela funcionará em versões mais antigas do IE, para limpar o efeito de flutuação, consulte: http://css-tricks.com/snippets/css/clear- corrigir / ) e também ter as elipses:

span {
    display: block;
    float: left;
    width: 100%;

    // truncate when long
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Então, tudo o que você faz é definir a max-widthsextensão e isso dará à lista a aparência de uma tabela.


você pode aplicar ul dentro de td (por exemplo <td><ul>...</ul></td>)? Parece que não funciona para mim :(
Sam

2

Em vez de usar reticências para resolver o problema de excesso de texto, descobri que uma entrada desabilitada e com estilo parecia melhor e ainda permite ao usuário visualizar e selecionar a sequência inteira, se necessário.

<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />

Parece um campo de texto, mas pode ser destacado para ser mais amigável ao usuário


2
Não é fácil de usar, porque o uso de tecnologias de assistência é interpretado incorretamente como uma entrada e, portanto, o usuário pensa que pode inserir algo. Não é correto usar mal a semântica dos elementos.
Carlo

OMG, isso é tão inteligente! como faz parte da tabela, basta definir a entrada como sem borda e com fundo transparente. Eu amo essa solução!
Sam

1

Verifique a box-sizingpropriedade css dos seus tdelementos. Eu tive um problema com o modelo css, que o define como border-boxvalor. Você precisa definir box-sizing: content-box.


0

Deixe suas mesas como estão. Apenas envolva o conteúdo dentro dos TDs com um intervalo que tenha o CSS de truncamento aplicado.

/* CSS */
.truncate {
    width: 50px; /*your fixed width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* this fixes your issue */
}

<!-- HTML -->
<table>
    <tbody>
        <tr>
            <td>
                <span class="truncate">
                    Table data to be truncated if it's too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>

Eu tentei isso, ele não funciona no DataTables.net. qualquer ideia?
Sam

-2

Se você não deseja definir a largura máxima como td (como nesta resposta ), pode definir a largura máxima como div:

function so_hack(){}

function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}

function so_hack(){}

Nota: 100% não funciona, mas 99% funciona no FF. Outros navegadores modernos não precisam de hacks div tolos.

td {
  borda: 1px preto sólido;
    preenchimento esquerdo: 5 px;
    padding-right: 5px;
}
td> div {
    largura máxima: 99%;
    estouro: oculto;
    excesso de texto: reticências;
    espaço em branco: nowrap;

}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.