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

500

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.

daGUY
fonte
9
As células da tabela não funcionam overflowbem. Tente colocar uma div na célula e denominá-la.
Sr. Lister

Respostas:

898

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]-->
TFD
fonte
7
A tabela também precisa de uma largura para que isso funcione no IE. jsfiddle.net/rBthS/69
Trevor Dixon
1
Se você definir width: 100%;e min-width: 1px;a célula sempre será a maior possível e usará reticências para truncar o texto quando necessário (e não quando a largura do elemento atingir um determinado tamanho) - isso é muito útil para layouts responsivos.
Duncan Walker
2
@OzrenTkalcecKrznaric funciona de display: table-cellfato, mas não quando o max-widthé definido em porcentagem (%). Testado em FF 32
Greg
14
(No seguimento do acima) no caso de você usar valores%, em seguida, usando apenas table-layout: fixedno elemento com display: tableirá fazer o truque
Greg
1
Que tal se você deseja que a largura das colunas seja atribuída automaticamente de maneira responsiva, como uma tabela responsiva de autoinicialização? definir uma largura máxima irá interferir nisso. Existe uma solução alternativa?
ninho
81

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: '&nbsp;';
    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.

AnthumChris
fonte
Nota: esta solução agrupa o conteúdo da célula em <span>elementos.
Roy Tinker
2
Esta é uma solução realmente inteligente e funciona bem em todas as tabelas para as quais eu exigiria uma solução. No entanto, é necessário definir larguras se você não quiser que todas as células da tabela tenham a mesma largura.
Kevin Beal
Quando não há larguras fixas, esta solução funciona melhor. Muito esperto mesmo!
avidenic
1
Isso mantém o alinhamento vertical quando outra solução, como display: blockfez não
j3ff
Simplesmente a melhor solução de sempre! Bastante engenhoso. Muito obrigado.
ClownCoder
39

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>

Jeroen
fonte
2
Bom obrigado. Não consegui remover as células da tabela da minha marcação, apenas envolvi o conteúdo em divs (com suas larguras definidas para as larguras das células) e apliquei o excesso lá. Trabalhou como um encanto!
daGUY 20/03/12
28

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.

insira a descrição da imagem aqui

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/

Alph.Dev
fonte
A resposta mais útil: as reticências dinâmicas são simplesmente fantásticas.
lucifer63
Ele atrapalha os limites de largura selecionados de cada coluna, por exemplo, se você tiver algumas colunas definidas, max-width: Xpois agora elas podem ser mais amplas - pensei que isso fosse por display: flexser usado, mas removi isso e não vejo diferença ...
user9645
24

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

jongala
fonte
2
Essa deve ser a resposta correta quando você não deseja especificar a largura da tabela.
adriaan
20

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:

insira a descrição da imagem aqui


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')

insira a descrição da imagem aqui


Etapa 3: defina titleas divs

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

insira a descrição da imagem aqui


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)

insira a descrição da imagem aqui


Etapa 5: defina a cor do texto div para transparent

E nós terminamos!

insira a descrição da imagem aqui

Cameron Price-Austin
fonte
2
Esta é uma solução incrível e perfeita! Eu me pergunto por que isso tem um voto negativo em vez da maioria dos votos positivos !!
Zendu
2
Incrível, cara! (@ user9645 - isso não está certo: ter que trabalhar com uma tabela processado com Vue.js - com certeza ser para colocar os títulos na div de, e não na de td)
Christian Opitz
@ChristianOpitz - Sim, eu devo ter estragado tudo de alguma forma ... tentei de novo e está funcionando.
user9645
Observei que essa abordagem falha ao usar em <a>vez de <div>dentro da célula da tabela. A adição word-break: break-all;resolve o problema. Exemplo: jsfiddle.net/de0bjmqv
zendu 26/07
Apenas ótimo. E você nem precisa ter o mesmo texto nas células (os títulos são suficientes) e não precisa de max-height: 1.1em etc - tudo o que você precisa para as divs é position: relative ;.
KS74 24/02/19
13

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>

Adesivos
fonte
5

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>

abbr
fonte
3
Eu também tive que adicionar white-space: nowrap;à childclasse.
Ross Allen
3

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.

Kjetil Hansen
fonte
seria bom com um JSFiddle, como muitas das outras respostas a essa pergunta popular.
Oma #
Sim, isso funciona, mas usei estilos um pouco diferentes para divs: left: 0; top: 0; right: 0; bottom: 0; padding: 2px; para obter a posição correta e ter o mesmo preenchimento das células da tabela.
KS74 24/02/19
0

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

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

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>
Ryan O'Connell
fonte
6
um <div> como filho direto de <table>? Isso não parece certo!
Michiel
@michiel FYI - os navegadores podem lidar com Divs abaixo das tags da tabela.
Ryan O'Connell /