截断表格中的长字符串会省略 html答案

【问题标题】：Truncating long strings in tables ellipses html截断表格中的长字符串会省略 html
【发布时间】：2011-05-08 03:09:05
【问题描述】：

我的表格有一个小问题，我在多个列中有很长的单个单词或多个中等大小的单词，占用了大量空间。我得到一个看起来像 http://cl 的结果。 ly/8cb66d08b6b9755ce858 即使我希望每个行自然增长，行也设置了宽度百分比，并且换行器不会破坏它并且 display: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 文件生成的。如果您知道任何适用于 jQuery 1.8 的插件（我见过一些可以工作的插件，但它们需要 1.3）。我想知道我是否可能需要手动更改表格列宽，因为表格中的数据和修改该数据不会自动修改列宽。

【问题讨论】：

标签： html html-table line word-wrap ellipsis

【解决方案1】：

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

另一个需要考虑的因素是使用&shy; 软连字符。如果您可以（在文本呈现到页面之前的服务器端或使用 JavaScript 在浏览器中）将这个 soft hyphen character 插入到您的文本中，浏览器会知道在此时打破您的话。

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

【讨论】：