Estouro de texto CSS em uma célula da tabela?

Eu quero usar CSS text-overflowem uma célula da tabela, de modo que, se o texto for muito longo para caber em uma linha, ele será cortado com reticências em vez de quebrar em várias linhas. Isso é possível?

Eu tentei isso:

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Mas isso white-space: nowrapparece fazer com que o texto (e sua célula) se expanda continuamente para a direita, empurrando a largura total da tabela para além da largura do seu contêiner. Sem ele, no entanto, o texto continua a quebrar em várias linhas quando atinge a borda da célula.

Para recortar um texto com reticências quando ela estourar uma célula da tabela, você precisará definir a max-widthpropriedade CSS em cada tdclasse para que o estouro funcione. Nenhuma div extra de layout é necessária

td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Para layouts responsivos; use a max-widthpropriedade CSS para especificar a largura mínima efetiva da coluna ou use apenas max-width: 0;para flexibilidade ilimitada. Além disso, a tabela que contém precisará de uma largura específica, normalmente width: 100%;, e as colunas terão sua largura definida como porcentagem da largura total

table {
    width: 100%;
}
td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
td.columnA {
    width: 30%;
}
td.columnB {
    width: 70%;
}

Histórico: para o IE 9 (ou menos), você precisa ter isso em seu HTML, para corrigir um problema de renderização específico do IE

<!--[if IE]>
<style>
    table {
        table-layout: fixed;
        width: 100px;
    }
</style>
<![endif]-->

Especificar uma max-widthlargura fixa ou não funciona para todas as situações, e a tabela deve ser fluida e espaçar automaticamente suas células. É para isso que servem as mesas.

Use isto: http://jsfiddle.net/maruxa1j/

HTML:

<td class="ellipsis">
    <span>This Text Overflows and is too large for its cell.</span>
</td>

CSS:

.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: ' ';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Funciona no IE9 e em outros navegadores.

Por que isso acontece?

Parece que esta seção no w3.org sugere que o excesso de texto se aplica apenas a elementos de bloco :

11.1.  Overflow Ellipsis: the ‘text-overflow’ property

text-overflow      clip | ellipsis | <string>  
Initial:           clip   
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no  
Percentages:       N/A  
Media:             visual  
Computed value:    as specified  

O MDN diz o mesmo .

Este jsfiddle possui seu código (com algumas modificações de depuração), que funciona bem se for aplicado a um em divvez de a td. Ele também tem a única solução alternativa em que eu poderia pensar rapidamente, envolvendo o conteúdo do tdem um divbloco contendo . No entanto, isso parece uma marcação "feia" para mim, então espero que outra pessoa tenha uma solução melhor. O código para testar isso se parece com o seguinte:

td, div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  width: 80px;
}

Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>

Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table>

Caso você não queira definir largura fixa para nada

A solução abaixo permite que você tenha um conteúdo longo da célula da tabela, mas não deve afetar a largura da tabela pai nem a altura da linha pai. Por exemplo, onde você deseja ter uma tabela com width:100%isso ainda aplica o recurso de tamanho automático a todas as outras células. Útil em grades de dados com a coluna "Notas" ou "Comentário" ou algo assim.

Adicione estas três regras ao seu CSS:

.text-overflow-dynamic-container {
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    vertical-align: text-bottom !important;
}
.text-overflow-dynamic-ellipsis {
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width:100%;
    top: 0;
    left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
    content: '-';
    display: inline;
    visibility: hidden;
    width: 0;
}

Formate HTML como este em qualquer célula da tabela em que você deseja um estouro dinâmico de texto:

<td>
  <span class="text-overflow-dynamic-container">
    <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
      //...your long text here...
    </span>
  </span>
</td>

Além disso, aplique o desejado min-width(ou nenhum) à célula da tabela.

Claro que o violino: https://jsfiddle.net/9wycg99v/23/

Parece que se você especificar table-layout: fixed;o tableelemento, seus estilos tddeverão entrar em vigor. Isso também afetará o tamanho das células.

O Sitepoint discute um pouco os métodos de layout da tabela aqui: http://reference.sitepoint.com/css/tableformatting

Se você apenas deseja que a tabela faça o layout automático

Sem usar max-width, ou porcentagem de larguras de coluna, table-layout: fixedetc.

https://jsfiddle.net/tturadqq/

Como funciona:

Etapa 1: deixe o layout automático da tabela fazer sua parte.

Quando houver uma ou mais colunas com muito texto, as outras colunas serão reduzidas o máximo possível e, em seguida, envolverá o texto das colunas longas:

Etapa 2: agrupar o conteúdo da célula em uma div e defina essa div como max-height: 1.1em

(o 0.1em extra é para caracteres que ficam um pouco abaixo da base do texto, como o final de 'g' e 'y')

Etapa 3: defina titleas divs

Isso é bom para a acessibilidade e é necessário para o pequeno truque que usaremos em um momento.

Etapa 4: adicione um CSS ::afterna div

Esta é a parte complicada. Definimos um CSS ::after, com content: attr(title), em seguida, posicionamos isso em cima da div e definimos text-overflow: ellipsis. Eu pintei de vermelho aqui para deixar claro.

(Observe como a coluna longa agora possui reticências de cauda)

Etapa 5: defina a cor do texto div para transparent

E nós terminamos!

Quando está na porcentagem de largura da tabela, ou você não pode definir largura fixa na célula da tabela. Você pode se inscrever table-layout: fixed;para fazê-lo funcionar.

table {
  table-layout: fixed;
  width: 100%;
}
td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid red;
}

<table>
  <tr>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
  </tr>
</table>

Enrole o conteúdo da célula em um bloco flexível. Como bônus, a célula se ajusta automaticamente à largura visível.

table {
  width: 100%;
}

div.parent {
  display: flex;
}

div.child {
  flex: 1;
  width: 1px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td>
      <div class="parent">
        <div class="child">
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </div>
      <div>
    </td>
  </tr>
</table>

Eu resolvi isso usando uma div absolutamente posicionada dentro da célula (relativa).

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

É isso aí. Em seguida, você pode adicionar um valor top: à div ou centralizá-lo verticalmente:

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height 
}

Para obter algum espaço no lado direito, você pode reduzir um pouco a largura máxima.

Isso funcionou no meu caso, no Firefox e no Chrome:

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

Esta é a versão que funciona no IE 9.

http://jsfiddle.net/s27gf2n8/

<div style="display:table; table-layout: fixed; width:100%; " >
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Top right Cell.
            </div>
        </div>
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Bottom right cell.
            </div>
        </div>
    </div>