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

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?

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/

È anche importante mettere

table-layout:fixed;

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

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

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 .

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>

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.

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

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.

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>

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;

}