防止元素扩展

Question

我有一个包含URL列的表，有时URL可能会很长。

我将表格设置为具有特定的宽度，但有时URL甚至不会破坏自身并展开与布局混淆的表格。

这是一个Fiddle供您查看，我将提供以下代码：

HTML

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>URL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Test</td>
      <td>http://www.exampledomain.org/How-We-Work/General-Information/General-Opportunities/Open-Concept-Memo-Global-Test-Cases</td>
    </tr>
  </tbody>
</table>

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>URL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Another Test</td>
      <td>http://www.exampledomain.org/search?q=flagship+collaborative+research+program&btnG=Google%2BSearch&client=csiro_frontend&output=xml_no_dtd&proxystylesheet=csiro_frontend&proxyreload=0&sort=date%253AD%253AL%253Ad1&wc=200&wc_mc=1&oe=UTF-8&ie=UTF-8&ud=1&exclude_apps=1&site=Main&filter=0&getfields=*&sourcepage={CB41B120-BEE8-4511-9BED-A5E43D32381D}</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 500px;
  margin: 5px;
}

Answer 1

https://jsfiddle.net/0xyhz7p0/1/

td {
   word-break: break-word;
}

Answer 2

您可以使用try stringArray.cStringArray().pointer 和table-layout: fixed

word-wrap: break-word;

table {
  table-layout: fixed;
  width: 500px;
  margin: 5px;
}
td {
   word-wrap: break-word;
}