Warum funktioniert die CSS-Ellipse in Tabellenzellen nicht?

Betrachten Sie das folgende Beispiel: ( Live-Demo hier )

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

Die Ausgabe lautet : width = 139, und die Auslassungspunkte werden nicht angezeigt.

Was fehlt mir hier?

Anscheinend fügte hinzu:

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

löst auch das Problem.

Eine andere mögliche Lösung besteht darin, table-layout: fixed;die Tabelle festzulegen und sie auch festzulegen width. Zum Beispiel: http://jsfiddle.net/fd3Zx/5/

Es ist auch wichtig zu setzen

table-layout:fixed;

Auf die enthaltende Tabelle, damit es auch in IE9 gut funktioniert (wenn Sie die maximale Breite verwenden).

Wie bereits erwähnt, können Sie verwenden td { display: block; }, dies macht jedoch den Zweck der Verwendung einer Tabelle zunichte.

Sie können verwenden, table { table-layout: fixed; }aber vielleicht möchten Sie, dass es sich für einige Spalten anders verhält.

Der beste Weg, um das zu erreichen, was Sie wollen, besteht darin, Ihren Text in a zu verpacken <div>und Ihr CSS wie folgt auf das <div>(nicht auf das <td>) anzuwenden :

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

Versuchen Sie es mit max-widthstatt width, die Tabelle berechnet die Breite weiterhin automatisch.

Funktioniert auch in ie11(mit ie8-Kompatibilitätsmodus).

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 .

Demoseite

Für Tabellen mit dynamischer Breite habe ich den folgenden Weg gefunden, um zufriedenstellende Ergebnisse zu erzielen. Jeder , <th>der will , wird getrimmter Text Fähigkeit haben sollte , ein inneres Wickelelement aufweist , das wickelt den Inhalt der <th>damit text-overflowan der Arbeit.

Der eigentliche Trick besteht darin, in Einheitenmax-width (auf <th>) zu setzen .vw

Dies führt effektiv dazu, dass die Breite des Elements an die Breite des Ansichtsfensters (Browserfenster) "gebunden" wird, und führt zu einem reaktionsschnellen Inhaltsausschnitt. vwStellen Sie die Einheiten auf einen zufriedenstellenden Wert ein.

Minimales CSS:

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

Hier ist eine ausführbare Demo:

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>

Ich bot nur eine Alternative an, da ich dieses Problem hatte und keine der anderen Antworten hier den gewünschten Effekt hatte. Also habe ich stattdessen eine Liste verwendet. Semantisch gesehen könnten die Informationen, die ich ausgegeben habe, sowohl als tabellarische Daten als auch als aufgelistete Daten angesehen werden.

Am Ende habe ich also Folgendes getan:

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

Also ulist table, liist trund spanist im Grunde td.

Dann setze ich in CSS die spanElemente auf display:block;und float:left;(ich bevorzuge diese Kombination, inline-blockda sie in älteren Versionen von IE funktioniert, um den Float-Effekt zu löschen, siehe: http://css-tricks.com/snippets/css/clear- fix / ) und auch die Ellipsen haben:

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

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

Dann legen Sie nur noch die max-widthsSpannweiten fest, damit die Liste wie eine Tabelle aussieht.

Anstatt Auslassungspunkte zu verwenden, um das Problem des Überlaufens von Text zu lösen, stellte ich fest, dass eine deaktivierte und gestaltete Eingabe besser aussah und es dem Benutzer dennoch ermöglicht, die gesamte Zeichenfolge anzuzeigen und auszuwählen, wenn dies erforderlich ist.

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

Es sieht aus wie ein Textfeld, ist jedoch hervorhebbar und daher benutzerfreundlicher

Überprüfen Sie die box-sizingCSS-Eigenschaft Ihrer tdElemente. Ich hatte ein Problem mit der CSS-Vorlage, die den border-boxWert festlegt . Du musst einstellen box-sizing: content-box.

Lass deine Tische so wie sie sind. Wickeln Sie den Inhalt einfach in die TDs mit einem Bereich ein, auf den das Kürzungs-CSS angewendet wird.

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

Wenn Sie die maximale Breite nicht auf td setzen möchten (wie in dieser Antwort ), können Sie die maximale Breite auf div setzen:

function so_hack(){}

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

function so_hack(){}

Hinweis: 100% funktioniert nicht, aber 99% machen den Trick in FF. Andere moderne Browser benötigen keine albernen Div-Hacks.

td {
  Rand: 1px festes Schwarz;
    Polsterung links: 5px;
    Polsterung rechts: 5px;
}}
td> div {
    maximale Breite: 99%;
    Überlauf versteckt;
    Textüberlauf: Auslassungspunkte;
    Leerraum: Nowrap;

}}