html - 如何让 仅在 break-word 失败时才 break-all？

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 拉伸(stretch)了表格，无论我是否在表格中设置了 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>