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

Question

我在表格中遇到了一个小问题，其中多列中有很长的单个单词或多个中等大小的单词，占用了大量空间。我得到的结果类似于 http://cl。 ly/8cb66d08b6b9755ce858 这些行已经设置了宽度百分比，即使我希望每个行都自然增长，而且换行器也不会破坏它，并且显示：无实际上不会阻止它，因为表格自然增长。我想要的是让表格保持在父母设置的宽度内（带有一些填充的蓝色部分）。 同样，标题是表格周围的一个 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 文件生成的。如果您知道任何可以与 jQuery 1.8 一起使用的插件（我见过一些可以工作，但它们需要 1.3）。我想知道是否需要进行手动更改，因为由于其中的数据而设置了表列宽度，并且修改该数据不会自动修改列的宽度。

Answer 1

部分问题可能是您已将自动换行的 CSS 属性分配给表格，而不是包含数据的实际单元格。查看是否可以分配一个样式或类来设置实际 元素上的 word-wrap:break-word; 属性。

另一个需要考虑的因素是使用 ­ 软连字符。如果您可以 - 在文本呈现到页面之前的服务器端或使用 JavaScript 在浏览器中 - 插入此 软连字符 到您的文本中，浏览器就会知道此时要打断您的单词。

最后，看看在表格开头应用 和 元素是否有助于清理表格结构并更明确地定义列宽度。最后一点可能不会对文本的自动换行和连字符产生太大影响，但可能有助于表格布局。