nicht Bruch Linie und Max-Breite

Question

Ich habe eine Tabelle und es kann keine Linie in jedem td brechen. Alle td hat die Eigenschaft max-width.

Einige td Text länger als max-width, und ich mag diesen Text zu diesem max-width "brechen", zum Beispiel:

Text: "Dies ist der Text in td"

Text, der in td passt: "Das ist"

Dies ist mein Code:

.nobreaklineClass{ 
 
    white-space: nowrap; 
 
} 
 
.maxwidthClass{ 
 
    max-width: 30px; 
 
}

<table> 
 
    <tr class="nobreaklineClass"> 
 
    <td class="maxwidthClass">"this is the text in td" </td> 
 
    </tr> 
 
</table>

Wie kann ich das tun?

Answer 1

hinzufügen overflow: hidden; zur Zelle:

.nobreaklineClass{ 
 
    white-space: nowrap; 
 
} 
 
.maxwidthClass{ 
 
    max-width: 30px; 
 
    border: 1px dotted #ddd; 
 
    overflow: hidden; 
 
}

<table> 
 
    <tr class="nobreaklineClass"> 
 
     <td class = "maxwidthClass">"this is the text in td" </td> 
 
    </tr> 
 
</table>

(ich eine punktierte Grenze hinzugefügt, um die Zellgröße deutlich zu machen)

Answer 2

ähnlich wie Johannes, aber mit Ellipsen:

.nobreaklineClass{ 
 
    white-space: nowrap; 
 
} 
 
.maxwidthClass{ 
 
    max-width: 80px; 
 
    border: 1px dotted #ddd; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<table> 
 
<tr class="nobreaklineClass"> 
 
    <td class = "maxwidthClass">this is the text in td</td> 
 
</tr> 
 
</table>