HTMLTableCellElement.noWrap — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableCellElement.noWrap

Beschreibung

Die Eigenschaft noWrap des Interfaces HTMLTableCellElement spiegelt das boolesche Inhaltsattribut nowrap einer <td>- oder <th>-Zelle wider. Ist sie true, bricht der Browser den Text der Zelle nicht automatisch in mehrere Zeilen um. Die Zelle wird dann so breit, wie ihr Inhalt es verlangt.

Wenn Sie die Eigenschaft auf true setzen, fügt der Browser das Attribut nowrap (mit leerem Wert) hinzu. Bei false entfernt er es. Beim Lesen erhalten Sie true, sobald das Attribut vorhanden ist, egal welchen Wert es hat. Auch nowrap="false" ergibt also true.

Das Attribut gilt in HTML5 als veraltet. Browser unterstützen es nur noch aus Gründen der Rückwärtskompatibilität. In neuem Code verwenden Sie besser die CSS-Eigenschaft white-space: nowrap (bzw. text-wrap-mode: nowrap). noWrap ist vor allem dann nützlich, wenn Sie alte Markup-Bestände auslesen, bereinigen oder nach CSS umstellen wollen.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut nowrap an der Zelle vorhanden ist, sonst false. Die Eigenschaft ist les- und schreibbar.

Beispiele

Zeilenumbruch in einer Zelle abfragen und setzen

const cell = document.querySelector('td');
console.log(cell.noWrap);

cell.noWrap = true; // setzt nowrap=""
console.log(cell.noWrap, cell.hasAttribute('nowrap'));
console.log(cell.outerHTML.startsWith('<td nowrap'));

false true true true

Legacy-Markup auf CSS umstellen

// Alle Zellen mit nowrap finden und durch moderne CSS-Angabe ersetzen
const cells = document.querySelectorAll('td, th');
let migriert = 0;

for (const cell of cells) {
  if (cell.noWrap) {
    cell.style.whiteSpace = 'nowrap';
    cell.noWrap = false; // entfernt das veraltete Attribut
    migriert++;
  }
}
console.log(`${migriert} Zellen migriert`);

3 Zellen migriert

Fallstrick: nowrap="false" ist trotzdem true

const table = document.createElement('table');
table.innerHTML = '<tr><td nowrap="false">Langer Text</td></tr>';
const td = table.querySelector('td');

console.log(td.noWrap);                 // Attribut vorhanden → true
console.log(td.getAttribute('nowrap')); // Rohwert

true false

// Wichtig · Fallstricke

Veraltet: Das Attribut nowrap ist in HTML5 obsolet. Nutzen Sie stattdessen white-space: nowrap in CSS. Die Eigenschaft funktioniert zwar in allen gängigen Browsern, Validatoren melden das Attribut aber als Fehler.
Boolesches Attribut: Entscheidend ist nur, ob das Attribut vorhanden ist. nowrap="false" schaltet den Umbruch nicht ein. Um den Umbruch wieder zuzulassen, setzen Sie noWrap = false oder rufen removeAttribute('nowrap') auf.
CSS hat Vorrang: Das Attribut wirkt nur als Präsentationshinweis mit sehr niedriger Spezifität. Eine CSS-Regel wie td { white-space: normal; } hebt es auf.
Sehr lange, nicht umbrechbare Zellinhalte können Tabellen horizontal über den Viewport hinaus verbreitern. Auf Mobilgeräten sollten Sie das bedenken, z. B. mit einem Container mit overflow-x: auto.

Siehe auch

HTMLObjectElement.useMap HTMLTableCellElement.abbr HTMLTableCellElement.rowSpan HTMLTableCellElement.colSpan HTMLTableCellElement.align