相关疑难解决方法(0)

我一直在用s和s word-wrap: break-word包装文本.但是,它似乎不适用于表格单元格.我有一个表设置,有一行和两列.列中的文本虽然使用上面的样式,但不会换行.它会使文本超出单元格的边界.这种情况发生在Firefox,谷歌浏览器和Internet Explorer上.divspanwidth:100%word-wrap

以下是源代码:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

上面的长词大于我的页面的边界,但它不会破坏上面的HTML.我已经尝试了以下建议加入text-wrap:suppress和text-wrap:normal,但也有帮助.

我试图打破一个基于逗号而不是空格的单词

我已经看到了包括将<wbr>标签添加到HTML中的解决方案,但是,对于动态信息,我现在需要另一个脚本将其插入到HTML文本中,如果用户没有启用JS,那么它对我来说并不是很好.

截至目前,我正在使用以下组合:

white-space: break-word;
word-break: break-all;

它可以作为一个好的解决方案,但是,我找到的这两个解决方案(/sf/answers/1059609071/ ; 在逗号,点,连字符或其他特殊字符上打破长 - 无空格行)超过3年 - 所以我想知道是否有更新的解决方案可用于此问题？

示例字符串:

C31C636363-Thermal,80mm,ReStick,串行,A/C,PSIncluded,EDG

样品休息:

C31C636363-Thermal,80mm,ReStick,

串行,A/C,PSIncluded,EDG