Wie lässt man nur brechen, wenn das Break-Word fehlschlägt?

Question

Wie betitelt.

Möglich ähnlich wie Using "word-wrap: break-word" within a table, aber die Antworten haben mein Problem nicht gelöst.

Beispiel:

| --<td style="width:100px">(example)-- | 
|          | 
| Example 1:       | 
| something long something something something | <- this line should break into below: 
|          | 
| something long something something | 
| something        | <- when break at word is possible 
|          | 
|          | 
| Example 2:       | 
| somethinglongsomethingsomethingsomethingsomething | <- this line should break into below: 
|          | 
| somethinglongsomethingsomethingsometh | 
| ingsomething       | <- when break at word is not possible 

Es scheint, wie ich entweder break-word oder break-all verwenden können.

Für break-word funktioniert Beispiel 1, aber Beispiel 2 streckt die Tabelle, unabhängig davon, ob ich table-layout: fixed in der Tabelle oder nicht festlegen.

Für break-all funktioniert Beispiel 2, aber Beispiel 1 bricht auch das Wort.

Gibt es eine clevere Möglichkeit, den Tisch nur dann zu brechen, wenn es sein muss?

Answer 1

Es gibt keine direkte HTML-only oder CSS-only Möglichkeit, dies zu tun.

Sie könnten jedoch Overkill gehen und eine JavaScript-Lösung verwenden. Eine Strategie: Schätze die maximale Anzahl von Zeichen, die in eine Zeile der Tabelle cel passen würden, suche die Zeichenfolge innerhalb der Tabelle cel nach einzelnen Wörtern, die länger als diese Zahl sind, und füge ein <wbr> Tag in das Wort ein (oder spalte es, oder fügen Sie ein Leerzeichen, oder etc) an diesem Punkt hinzu.

$('td').each(function() { 
 
    var contents = $(this).html(); 
 
    contents = contents.replace(/(\w{25})/g,"$1<wbr>"); 
 
    $(this).html(contents); 
 
    });

td {border:1px solid; max-width: 15em;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>This has short words</td> 
 
    </tr> 
 
    <tr> 
 
    <td>This has a long word: bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk!</td> 
 
    </tr> 
 
    </table>