相关疑难解决方法(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,但也有帮助.

在我的表中,我将列中第一个单元格的宽度设置为100px.
但是,当此列中某个单元格中的文本太长时,列的宽度会变得更大100px.我怎么能禁用这个扩展？

在一个涉及的项目中,我需要使用特定宽度的列来呈现表,每个表行只有一行HTML行(没有换行).我需要每个表格单元格在顶部和底部填充1个像素,在左侧和右侧填充2个像素.我能想出的跨浏览器的最佳方法是以这种方式将div放在表内的td中:

<style>
  table.grid { border: none; border-collapse: collapse; }
  table.grid tbody tr td { padding: 1px 2px; }
  table.grid tbody tr td div { overflow: hidden; white-space: nowrap; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><div>One</div></td>
      <td class="two"><div>Two</div></td>
    </tr>
    <tr>
      <td class="one"><div>Another One</div></td>
      <td class="two"><div>Another Two</div></td>
    </tr>
  </tbody>
</table>

我希望能够消除添加额外div的需要.我花了很多时间在谷歌搜索这个问题,但找不到替代方案.

有没有办法做我需要的东西而不需要添加额外的div？如果那么,它是什么？

有没有办法在不使用表的情况下获得所需的结果？