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

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?

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/

Também é importante colocar

table-layout:fixed;

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

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;
}

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 .

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>

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.

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

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.

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>

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;

}