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

我在表中有一个小问题，那里有很多单个字或多个中等大小的字，占用大量空间。我得到的结果看起来像http://cl。 ly/8cb66d08b6b9755ce858 即使我希望每个行都有自然增长，行也设置了宽度百分比，并且行封装不会打破它并显示：没有实际上不会停止它，因为表自然增长。我想要的是桌子留在父母的设置宽度（蓝色部分有一些填充）。以及头是一个围绕桌子的样式，我不能改变。截断表中的长字符串省略号html

<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的插件）。我想知道是否可能需要手动更改表格列的宽度，因为其中的数据和修改该数据不会自动修改列的宽度。

来源

2010-11-10 Craig

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

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

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

来源

2010-11-10 22:31:06

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

回答

相关问题