Eine der Spalten in meiner Tabelle kann einen langen Text ohne Leerzeichen enthalten. Wie kann ich seine Breite auf etwa 150px beschränken? Ich möchte nicht, dass es immer 150px ist (wenn es leer ist, sollte es eng sein), aber wenn es einen langen Text gibt, möchte ich, dass es auf 150px begrenzt ist und der Text eingeschlossen wird.
Hier ein Testbeispiel: http://jsfiddle.net/Kh378/ (lasst uns die 3. Spalte einschränken).
Danke im Voraus.
Update:
Einstellen dieser Stile:
Word-wrap: break-Word;
max-width: 150px;
funktioniert nicht in IE8 (getestet auf verschiedenen Computern) und ich nehme an, dass es in keiner Version von IE funktioniert.
Bei den td
- und th
-Tags der Tabelle habe ich Folgendes hinzugefügt:
Word-wrap: break-Word;
max-width: 150px;
Nicht in jedem Browser voll kompatibel, aber ein Anfang.
Sie müssen stattdessen die Breite verwenden.
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th style="width: 150px;"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Aber nur in der <thead>
Sektion.
Sie sollten in der Lage sein, Ihre Kolumne mit:
max-width: 150px;
Word-wrap: break-Word;
Beachten Sie, dass Word-wrap
in den Browsern IE 5.5+, Firefox 3.5+ und WebKit (Chrome und Safari) unterstützt wird.
Nach einigen Experimenten in Chrome kam ich zu folgendem:
<th>
hat, sollte entweder "width" oder "max-width" gesetzt sein <td>
s müssen eine "max-width" und "Word-wrap: break-Word" festgelegt haben.Wenn Sie eine "Breite" im <th>
verwenden, wird dessen Wert verwendet. Wenn Sie im <th>
eine "max-width" verwenden, wird stattdessen der Wert "max-width" der <td>
verwendet.
Diese Funktionalität ist also recht komplex. Und ich habe nicht einmal Tabellen ohne Kopfzeilen oder ohne lange Zeichenfolgen studiert, die ein "Break-Word" benötigen.
es ist sehr leicht
Sie können Attribute wie diese hinzufügen
maximale Breite
maximale Höhe
Sie können in HTML als Attribut oder in CSS als Stil festgelegt werden
es gibt eine Option, um die maximale Breite zu simulieren:
simulateMaxWidth: function() {
this.$el.find('th').css('width', ''); // clear all the width values for every header cell
this.$el.find('th').each(function(ind, th) {
var el = $(th);
var maxWidth = el.attr('max-width');
if (maxWidth && el.width() > maxWidth) {
el.css('width', maxWidth + 'px');
}
});
}
diese Funktion kann mehrfach unter $ (window) .on ('resize', ...) aufgerufen werden
this.$el
stellt übergeordnetes Element dar, in meinem Fall habe ich Marionette
für die th-Elemente, die max-width haben sollten, sollte ein max-width-Attribut vorhanden sein:
<th max-width="120">
1) Geben Sie die Breite für jede Spalte in <th>
an.
2) Fügen Sie für jeden <td>
in <tr>
des <table>
einen Zeilenumbruch ein.
Word-wrap: break-Word;