Perché i puntini di sospensione CSS non funzionano nella cella della tabella?


150

Considera il seguente esempio: ( demo live qui )

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

L'output è: width = 139e i puntini di sospensione non vengono visualizzati.

Cosa mi sto perdendo qui?



In qualche modo duplicato, ma la risposta non fornisce una soluzione alternativa (come Arlen Cuss fa).
Florian Margaine,

1
widthe heightsulle celle della tabella vengono sempre utilizzate come larghezza e altezza minime . Le celle della tabella sono diverse!
Lister,

1
@FlorianMargaine In realtà, l'altra domanda fornisce una soluzione alternativa: inserire un div nella cella con la larghezza desiderata.
Lister,

Preferisco comunque le risposte elencate in questa pagina.
Florian Margaine,

Risposte:


102

Apparentemente, aggiungendo:

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

risolve anche il problema.


Un'altra possibile soluzione è l'impostazione table-layout: fixed;per la tabella e anche l'impostazione width. Ad esempio: http://jsfiddle.net/fd3Zx/5/


4
Esattamente. Gli elementi con display: table-cell(impostazione predefinita per gli tdelementi) non accettano una larghezza.
Michael Mior,

29
display: block;una sorta di sconfitta allo scopo di usare una tabella. Mi piace l' table-layout: fixed;opzione, ha funzionato bene per me.
Alex K,

7
table-layout:fixeddistribuisce la larghezza delle colonne in modo meno intelligente. Esiste un'altra opzione che assegnerà la larghezza della colonna nello stesso modo table-layout: normale che tuttavia visualizzerà correttamente i puntini di sospensione?
annida il

Questo avvita con il bordo del tavolo; usando max-larghezza no.
Charlie,

85

È anche importante mettere

table-layout:fixed;

Sulla tabella contenente, quindi funziona bene in IE9 (se utilizzi la larghezza massima).


7
questo assicurerà anche che l'overflow del testo funzioni in layout reattivi
jao

3
Questo è esattamente ciò di cui avevo bisogno. Ho la larghezza della tabella al 100%. E tutte le colonne tranne una con una larghezza fissa. Ciò consente all'ultima colonna di occupare tutto lo spazio rimasto.
matthew_360,

78

Come detto prima, è possibile utilizzare td { display: block; }ma ciò vanifica lo scopo di utilizzare una tabella.

Puoi usarlo table { table-layout: fixed; }ma forse vuoi che si comporti in modo diverso per alcune colonne.

Quindi il modo migliore per ottenere ciò che vuoi sarebbe avvolgere il tuo testo in un <div>e applicare il tuo CSS al <div>(non al <td>) in questo modo:

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

2
Questo è il metodo più semplice che abbia mai visto e funziona su IE8.
Keith Ketterer

2
Questa è in realtà la migliore soluzione che ho visto sui puntini di sospensione nelle tabelle.
membri

41

Prova a utilizzare max-widthinvece di width, la tabella calcolerà comunque automaticamente la larghezza.

Funziona anche in ie11(con modalità di compatibilità 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
Ben individuato. Probabilmente è meglio usare entrambi , in modo che l'elemento abbia una larghezza fissa. Altrimenti potrebbe essere più breve se il contenuto lo consentisse.
LSerni,

Molto meglio di display hack; viti del displayhack con il bordo del tavolo.
Charlie,

21

Pagina dimostrativa

Per le tabelle con larghezza dinamica, ho trovato il modo seguente per produrre risultati soddisfacenti. Ognuno <th>che desidera avere l'abilità del testo ritagliato dovrebbe avere un elemento di avvolgimento interno che avvolge il contenuto del <th>permesso text-overflowdi lavorare.

Il vero trucco è impostare max-width(sul <th>) in vwunità .

Ciò farà sì che la larghezza dell'elemento sia "legata" alla larghezza della finestra (finestra del browser) e si tradurrà in un ritaglio del contenuto reattivo. Impostare le vwunità su un valore soddisfacente necessario.

CSS minimo:

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

Ecco una demo eseguibile:

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

Offrendo solo un'alternativa poiché avevo questo problema e nessuna delle altre risposte qui aveva l'effetto desiderato che desideravo. Quindi invece ho usato un elenco. Ora semanticamente le informazioni che stavo trasmettendo avrebbero potuto essere considerate sia dati tabulari sia dati elencati.

Quindi alla fine quello che ho fatto è stato:

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

Quindi sostanzialmente ulè table, liè tred spanè td.

Quindi in CSS ho impostato gli spanelementi su ( display:block;e float:left;preferisco quella combinazione a inline-blockcome funzionerà nelle versioni precedenti di IE, per cancellare l'effetto float vedi: http://css-tricks.com/snippets/css/clear- fix / ) e per avere anche le ellissi:

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

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

Quindi tutto ciò che fai è impostare il max-widthstuo span e questo darà alla lista un aspetto di una tabella.


puoi applicare ul inside td (es. <td><ul>...</ul></td>)? Non sembra funzionare per me :(
Sam, il

2

Invece di usare i puntini di sospensione per risolvere il problema del trabocco del testo, ho scoperto che un input disabilitato e con stile sembrava migliore e consente comunque all'utente di visualizzare e selezionare l'intera stringa se necessario.

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

Sembra un campo di testo ma è in grado di evidenziare, quindi più facile da usare


2
Non è facile da usare perché utilizzando tecnologie assistive viene letto erroneamente come input e quindi l'utente pensa di poter inserire qualcosa. Non è del tutto corretto abusare della semantica degli elementi.
Carlo,

OMG, è così intelligente! poiché fa parte della tabella, basta semplicemente impostare l'input come senza bordi con sfondo trasparente. Adoro questa soluzione!
Sam,

1

Controlla la box-sizingproprietà css dei tuoi tdelementi. Ho avuto problemi con il modello CSS che lo imposta sul border-boxvalore. Hai bisogno di set box-sizing: content-box.


0

Lascia i tuoi tavoli così come sono. Basta avvolgere il contenuto all'interno del TD con un intervallo a cui è applicato il CSS di troncamento.

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

Ho provato questo, non funziona su DataTables.net. qualche idea?
Sam,

-2

Se non vuoi impostare la larghezza massima su td (come in questa risposta ), puoi impostare la larghezza massima su div:

function so_hack(){}

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

function so_hack(){}

Nota: il 100% non funziona, ma il 99% fa il trucco in FF. Altri browser moderni non hanno bisogno di hack div sciocchi.

td {
  bordo: 1px nero solido;
    padding-left: 5px;
    padding-right: 5px;
}
td> div {
    larghezza massima: 99%;
    troppo pieno: nascosto;
    overflow del testo: puntini di sospensione;
    white-space: nowrap;

}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.