截断表格中的长字符串省略了html

Question

我在表中遇到一个小问题，其中我有多个单词或多个中等大小的单词占用大量空间。我得到的结果看起来像http://cl。 ly / 8cb66d08b6b9755ce858这些行设置了宽度百分比，即使我希望每个行都有自然增长，而且换行符不会破坏它并显示：当表自然增长时，none实际上不会停止它。我想要的是桌子留在父母设置的宽度（蓝色部分有一些填充）。标题是桌子周围的div，用于造型，我无法改变。

<div class="table-wrapper group">
  <table class="tabular sortable" id="campaign_table" style="table-layout:fixed; word-wrap: break-word; ">
    <thead>
      <tr>
        <td class="sorttable_nosort" style="border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">
          <input type="checkbox" id="check_all_2" name="check_all_2" title="Select All" onclick="selectAllTable(document.wizard_form, check_all_2); checkIsSelected([ 'by_date', 'display_hidden', 'check_all_2']);">
        </td>
        <td width="37%" style="border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">List/Campaign</td>
        <td width="43%" style="border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">Template &amp; Segmentation</td>
        <td width="17%" style="min-width: 140px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(255, 255, 255); ">Date Sent</td>
        <td width="4%">Sent</td>
      </tr>   
    </thead>

    <tbody class="campaign-table">
      <input type="hidden" id="campaignNum" name="campaignNum" value="1">
      <tr class="evenRow">
        <td>
          <label>
            <input type="checkbox" id="select_981" name="select_981" onclick="checkIsSelected(['by_date', 'display_hidden']);">  
          </label>
        </td>
        <td>0ThisIsAReallyLongNameThatHasNoSpacesHopefullyMaxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        <td>ThisIsAReallyLongNameThatHasNoSpacesHopefullyMax <br>  (BiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiggggggggggggggggggggggggggggggggggggggggText)</td>
        <td>11/08/10 4:28 PM</td>
        <td>0</td>
      </tr>
    </tbody>
    <tfoot></tfoot>
  </table> 
</div>

注意，大多数类和样式都是从某些JavaScript文件生成的。如果您知道任何与1.8的jQuery一起使用的插件（我已经看到一些可以工作但它们需要1.3的插件）。我想知道是否可能必须进行手动更改，因为表格列宽度正在设置，因为它们中的数据并且修改数据不会自动修改列的宽度。

Answer 1

问题的一部分可能是您已将word-wrap的CSS属性分配给表，而不是包含数据的实际单元格。看看你是否可以指定在实际的word-wrap: break-word;元素上设置<td>属性的样式或类。

另一个要考虑的问题是使用­软连字符。如果您可以 - 在文本呈现到页面之前的服务器端或使用JavaScript的浏览器中 - 将此soft hyphen character插入到您的文本中，浏览器将知道在那时打破您的单词。

最后，看看在表的开头应用<colgroup>和<col>元素是否有助于清理表结构并更明确地定义列宽。最后一点可能对实际影响文本的自动换行和连字效果不大，但可能有助于表格布局。