Overflow del testo CSS in una cella di tabella?

Voglio usare i CSS text-overflowin una cella di tabella, in modo tale che se il testo è troppo lungo per adattarsi a una riga, si aggancerà con un puntino di sospensione anziché avvolgersi su più righe. È possibile?

Ho provato questo:

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

Ma white-space: nowrapsembra che il testo (e la sua cella) si espandano continuamente verso destra, spingendo la larghezza totale della tabella oltre la larghezza del suo contenitore. Senza di essa, tuttavia, il testo continua a scorrere su più righe quando colpisce il bordo della cella.

Per ritagliare il testo con i puntini di sospensione quando viene traboccato da una cella di tabella, sarà necessario impostare la max-widthproprietà CSS su ogni tdclasse affinché l'overflow funzioni. Non sono richiesti div di layout extra

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

Per layout reattivi; usa la max-widthproprietà CSS per specificare la larghezza minima effettiva della colonna, o semplicemente usa max-width: 0;per flessibilità illimitata. Inoltre, la tabella contenente avrà bisogno di una larghezza specifica, in genere width: 100%;, e le colonne avranno in genere la loro larghezza impostata come percentuale della larghezza totale

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

Storico: per IE 9 (o meno) devi avere questo nel tuo HTML, per risolvere un problema di rendering specifico di IE

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

Specificare una max-widthlarghezza fissa o non funziona per tutte le situazioni e la tabella dovrebbe essere fluida e auto-spaziare le sue celle. Ecco a cosa servono le tabelle.

Usa questo: 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;
}

Funziona su IE9 e altri browser.

Perché succede?

Sembra che questa sezione su w3.org suggerisce che l' overflow del testo si applica solo agli elementi di blocco :

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  

Il MDN dice lo stesso .

Questo jsfiddle ha il tuo codice (con alcune modifiche di debug), che funziona bene se applicato a a divanziché a td. Ha anche l'unica soluzione a cui potrei pensare rapidamente, avvolgendo il contenuto di tdun divblocco contenitore . Tuttavia, questo mi sembra un "brutto" markup, quindi spero che qualcun altro abbia una soluzione migliore. Il codice per testarlo è simile al seguente:

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>

Nel caso in cui non si desideri impostare la larghezza fissa su nulla

La soluzione seguente consente di avere un contenuto di cella di tabella lungo, ma che non deve influire sulla larghezza della tabella padre né sull'altezza della riga padre. Ad esempio, dove si desidera avere una tabella con width:100%cui si applica ancora la funzione di ridimensionamento automatico a tutte le altre celle. Utile nelle griglie di dati con colonna "Note" o "Commento" o qualcosa del genere.

Aggiungi queste 3 regole al tuo 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;
}

Formatta HTML in questo modo in qualsiasi cella di tabella che desideri overflow dinamico del testo:

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

Applicare inoltre desiderato min-width(o nessuno) alla cella della tabella.

Naturalmente il violino: https://jsfiddle.net/9wycg99v/23/

Sembra che se si specifica table-layout: fixed;sul tableelemento, poi gli stili per tddovrebbe avere effetto. Tuttavia, ciò influirà anche sulla dimensione delle celle.

Sitepoint discute un po 'i metodi di layout della tabella qui: http://reference.sitepoint.com/css/tableformatting

Se vuoi solo che la tabella si auto-impagini

Senza utilizzare max-width, o percentuali di larghezza di colonna o table-layout: fixedecc.

https://jsfiddle.net/tturadqq/

Come funziona:

Passaggio 1: lascia che il layout automatico della tabella faccia la sua parte.

Quando ci sono una o più colonne con molto testo, le altre colonne verranno ridotte il più possibile, quindi avvolgerà il testo delle colonne lunghe:

Passaggio 2: avvolgere il contenuto della cella in un div, quindi impostare quel div su max-height: 1.1em

(lo 0.1em extra è per i caratteri che vengono visualizzati un po 'al di sotto della base di testo, come la coda di' g 'e' y ')

Passaggio 3: titleimposta i div

Questo è buono per l'accessibilità ed è necessario per il piccolo trucco che useremo tra un momento.

Passaggio 4: aggiungere un CSS ::aftersul div

Questa è la parte difficile. Impostiamo un CSS ::after, con content: attr(title), quindi posizioniamo questo in cima al div e impostiamo text-overflow: ellipsis. L'ho colorato di rosso qui per chiarirlo.

(Nota come ora la colonna lunga ha dei puntini di sospensione)

Passaggio 5: impostare il colore del testo div su transparent

E abbiamo finito!

Quando è in larghezza della tabella percentuale o non è possibile impostare la larghezza fissa sulla cella della tabella. Puoi candidarti table-layout: fixed;per farlo funzionare.

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>

Avvolgere il contenuto cellulare in un blocco flessibile. Come bonus, la cella si adatta automaticamente alla larghezza visibile.

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>

Ho risolto questo problema usando un div assolutamente posizionato all'interno della cella (relativo).

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

Questo è tutto. Quindi puoi aggiungere un valore top: al div o centrarlo verticalmente:

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

Per ottenere un po 'di spazio sul lato destro, puoi ridurre leggermente la larghezza massima.

Questo ha funzionato nel mio caso, sia in Firefox che in Chrome:

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

Questa è la versione che funziona in 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>