Warum funktioniert die CSS-Ellipse in Tabellenzellen nicht?

150

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?

Mischa Moroshko
quelle
2
Mögliches Duplikat des CSS-Textüberlaufs in einer Tabellenzelle?
BoltClock
Irgendwie doppelt, aber die Antwort bietet keine Problemumgehung (wie es Arlen Cuss tut).
Florian Margaine
1
widthund heightauf dem Tisch werden Zellen immer als minimale Breite und Höhe verwendet. Tabellenzellen sind unterschiedlich!
Herr Lister
1
@FlorianMargaine Tatsächlich bietet die andere Frage eine Problemumgehung: Fügen Sie ein Div mit der gewünschten Breite in die Zelle ein.
Herr Lister
Ich bevorzuge jedoch immer noch die auf dieser Seite aufgeführten Antworten.
Florian Margaine

Antworten:

102

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/

Mischa Moroshko
quelle
4
Genau. Elemente mit display: table-cell(Standardeinstellung für tdElemente) akzeptieren keine Breite.
Michael Mior
29
display: block;Art besiegt den Zweck der Verwendung einer Tabelle. Ich mag die table-layout: fixed;Option, es hat gut für mich funktioniert.
Alex K
7
table-layout:fixedverteilt die Breite der Spalten weniger intelligent. Gibt es eine andere Option, die die Spaltenbreite auf die gleiche Weise table-layout: normalzuweist und die Auslassungspunkte dennoch korrekt anzeigt?
Nest
Dies schraubt mit dem Tischrand; mit max-width nicht.
Charlie
84

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

Strassenlicht
quelle
7
Dadurch
3
Genau das brauchte ich. Ich habe die Tischbreite 100%. Und alle Spalten bis auf eine mit fester Breite. Dadurch kann die letzte Spalte so viel Platz einnehmen, wie noch übrig ist.
Matthew_360
78

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;
}
marcosbdm
quelle
2
Dies ist die einfachste Methode, die ich je gesehen habe, und sie funktioniert tatsächlich in IE8.
Keith Ketterer
2
Das ist eigentlich die beste Lösung, die ich bei Auslassungspunkten in Tabellen gesehen habe.
Membersound
41

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 .

Asherah
quelle
1
Gut erkannt. Es ist wahrscheinlich am besten, beide zu verwenden , damit das Element eine feste Breite hat. Andernfalls könnte es kürzer sein, wenn der Inhalt dies zulässt.
LSerni
Viel besser als Display-Hack; Displayhack-Schrauben mit Tischrand.
Charlie
21

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>

vsync
quelle
3

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.

diggersworld
quelle
kannst du ul innerhalb von td anwenden (zB <td><ul>...</ul></td>)? Es scheint bei mir nicht zu funktionieren :(
Sam
2

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

Craigsnyders
quelle
2
Es ist nicht benutzerfreundlich, da bei Verwendung von Hilfstechnologien dies als Eingabe falsch gelesen wird und der Benutzer glaubt, etwas eingeben zu können. Es ist nicht in Ordnung, die Semantik der Elemente zu missbrauchen.
Carlo
OMG, das ist so schlau! Da es Teil der Tabelle ist, setzen Sie die Eingabe einfach als randlos mit transparentem Hintergrund. Ich liebe diese Lösung!
Sam
1

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

David Slavík
quelle
0

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>
Jeff Sieffert
quelle
Ich habe es versucht, es funktioniert nicht auf DataTables.net. irgendeine Idee?
Sam
-2

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;

}}
Timo Kähkönen
quelle