如何讓​​只有當break-word失敗時纔會破解？

Question

標題爲。

可能與Using "word-wrap: break-word" within a table類似，但答案並未解決我的問題。

例子：

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

好像我既可以使用break-word或break-all。

對於break-word，示例1有效，但示例2拉伸了表，無論我是否在表中設置了table-layout: fixed。

對於break-all，示例2有效，但示例1也打破了這個詞。

有沒有什麼聰明的方法讓表格只有在必須時纔打破這個詞？

Answer 1

沒有直接的純HTML或純CSS的方式來做到這一點。

但是，您可能會過度使用並使用javascript解決方案。一種策略是：估計可容納在表格cel的一行中的字符的最大數量，在表格cel內的字符串中搜索比該數字更長的單個字詞，並在該字詞中插入<wbr>標籤（或者將其連字符，或添加空間等）。

$('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>