it-swarm.com.de

Warum funktioniert CSS-Ellipsis nicht in Tabellenzellen?

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

HTML:

<table>
  <tbody>
    <tr><td>Hello Stack Overflow</td></tr>
  </tbody>
</table>

CSS:

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

JS:

$(function() {
  console.log("width = " + $("td").width());
});

Die Ausgabe ist: width = 139, und die Ellipsis wird nicht angezeigt.

Was fehlt mir hier?

129
Misha Moroshko

Anscheinend fügte hinzu:

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

löst auch das Problem.


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

95
Misha Moroshko

Es ist auch wichtig zu setzen

table-layout:fixed;

Auf der enthaltenden Tabelle funktioniert sie auch gut in IE9 (wenn Sie max-width verwenden).

73
streetlight

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

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

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

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

Verwenden Sie max-width anstelle von width. Die Tabelle berechnet die Breite trotzdem 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 .

33
Ashe

Demo-Seite

Für Tabellen mit dynamischer Breite habe ich den folgenden Weg gefunden, um zufriedenstellende Ergebnisse zu erzielen. Jeder <th>, der über die Fähigkeit zum Beschneiden von Text verfügen soll, sollte ein inneres Umbruchelement haben, das den Inhalt des <th> allow text-overflow umschließt. 

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

Dies bewirkt effektiv, dass die Breite des Elements an die Breite des Darstellungsbereichs (Browserfenster) "gebunden" wird und zu einem reaktionsschnellen Inhalt führt. Stellen Sie die vw-Einheiten auf einen erforderlichen zufriedenstellenden Wert ein. 

Minimales CSS:

th{ max-width:10vw; }

th > .wrap{ 
   text-overflow:Ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

Hier ist eine lauffähige 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>

15
vsync

Nur eine Alternative anzubieten, da ich dieses Problem hatte und keine der anderen Antworten hier den gewünschten Effekt hatte. Also habe ich stattdessen eine Liste verwendet. Semantisch konnten die Informationen, die ich ausgab, sowohl als Tabellendaten als auch als aufgelistete Daten angesehen werden.

Was ich am Ende tat, war also:

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

Im Grunde ist ultable, li ist tr und spantd.

Dann setze ich in CSS die span-Elemente auf display:block; und float:left; (Ich bevorzuge diese Kombination auf inline-block, da dies in älteren IE-Versionen funktioniert, um den Float-Effekt zu löschen, siehe: http://css-tricks.com/ Schnipsel/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;
}

Alles, was Sie tun, ist, den max-widths Ihres Bereichs festzulegen, und die Liste wird wie eine Tabelle aussehen.

3
diggersworld

Anstatt Ellipsis 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 immer noch 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 hervorzuheben und somit benutzerfreundlicher

1
craigsnyders

Überprüfen Sie die box-sizing css -Eigenschaft Ihrer td-Elemente. Ich hatte ein Problem mit der Css-Vorlage, die den Wert border-box festlegt. Sie benötigen box-sizing: content-box.

1
David Slavík

Wenn Sie max-width nicht auf td setzen möchten (wie in diese Antwort ), können Sie max-width auf div setzen:

function so_hack(){}

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

function so_hack(){}

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

 td {
 Rand: 1px durchgehend schwarz; 
 Polsterung links: 5px; 
 rechts: 5px; 
} 
 td> div {
 Max-Breite: 99%; 
 Überlauf versteckt;
 Textüberlauf: Ellipsis; 
 Leerzeichen: Nowrap; 

} 
0
Timo Kähkönen

Lass deine Tische so wie sie sind. Packen Sie den Inhalt innerhalb der TDs einfach mit einem Bereich um, auf den das abgeschnittene 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>
0
Jeff Sieffert