弗雷德会面。他是一张桌子:
<table border="1" style="width: 100%;">
<tr>
<td>This cells has more content</td>
<td>Less content here</td>
</tr>
</table>
弗雷德的公寓有改变大小的奇怪习惯，所以他学会了隐藏一些他的内容，这样就不会把其他所有的单元都挤过去，把惠特福德夫人的客厅挤到被遗忘的地方:
<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
<tr>
<td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
<td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
</tr>
</table>
这种方法很有效，但弗雷德有一种挥之不去的感觉，如果他的右细胞(他昵称为Celldito)让出一点空间，他的左细胞就不会经常被截断。你能挽救他的理智吗?
总之:表的单元格如何才能均匀溢出，并且只有在它们都放弃了所有空白的情况下才能溢出?
如果Javascript是可以接受的，我把一个快速例程放在一起，你可以作为一个起点。它动态地尝试使用跨度的内部宽度来适应单元格宽度，以响应窗口调整大小事件。
目前，它假设每个单元格通常获得行宽的50%，并且它将折叠右侧单元格以保持左侧单元格的最大宽度，以避免溢出。您可以实现更复杂的宽度平衡逻辑，这取决于您的用例。希望这能有所帮助:
我用于测试的行标记:
<tr class="row">
<td style="overflow: hidden; text-overflow: ellipsis">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</td>
<td style="overflow: hidden; text-overflow: ellipsis">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</td>
</tr>
JQuery，它连接了resize事件:
$(window).resize(function() {
$('.row').each(function() {
var row_width = $(this).width();
var cols = $(this).find('td');
var left = cols[0];
var lcell_width = $(left).width();
var lspan_width = $(left).find('span').width();
var right = cols[1];
var rcell_width = $(right).width();
var rspan_width = $(right).find('span').width();
if (lcell_width < lspan_width) {
$(left).width(row_width - rcell_width);
} else if (rcell_width > rspan_width) {
$(left).width(row_width / 2);
}
});
});
假定“表布局:固定”是基本的布局要求，这将创建均匀间隔的不可调整列，但您需要使单元格的百分比宽度不同，也许设置单元格的“colspan”为倍数?
例如，为了方便百分比计算，使用总宽度为100，并且假设您需要一个单元格为80%，另一个单元格为20%，考虑:
<TABLE width=100% style="table-layout:fixed;white-space:nowrap;overflow:hidden;">
<tr>
<td colspan=100>
text across entire width of table
</td>
<tr>
<td colspan=80>
text in lefthand bigger cell
</td>
<td colspan=20>
text in righthand smaller cell
</td>
</TABLE>
当然，对于80%和20%的列，您可以将100%宽度的单元格colspan设置为5,80%宽度的单元格colspan设置为4,20%宽度的单元格colspan设置为1。
就像samplebias答案一样，如果Javascript是一个可接受的答案，我专门为此目的做了一个jQuery插件:https://github.com/marcogrcr/jquery-tableoverflow
要使用插件，只需输入
$('selector').tableoverflow();
完整示例:http://jsfiddle.net/Cw7TD/3/embedded/result/
编辑:
修复了jsfiddle的IE兼容性问题。
修复jsfiddle中更好的浏览器兼容性(Chrome, Firefox, IE8+)。
我相信我有一个非javascript的解决方案!我不想满足于JavaScript的修复，因为我发现页面加载后东西移动的轻微抖动是不可接受的。
特点:
没有JavaScript
没有固定布局
没有加权或百分比宽度技巧
适用于任意数量的列
简单的服务器端生成和客户端更新(不需要计算)
跨浏览器兼容的
How it works: Inside the table cell place two copies of the content in two different elements within a relatively-positioned container element. The spacer element is statically-positioned and as such will affect the width of the table cells. By allowing the contents of the spacer cell to wrap we can get the "best-fit" width of the table cells that we are looking for. This also allows us to use the absolutely-positioned element to restrict the width of the visible content to that of the relatively-positioned parent.
测试和工作在:IE8, IE9, IE10, Chrome, Firefox, Safari, Opera
结果图片:
JSFiddle: http://jsfiddle.net/zAeA2/
示例HTML / CSS:
<td>
<!--Relative-positioned container-->
<div class="container">
<!--Visible-->
<div class="content"><!--Content here--></div>
<!--Hidden spacer-->
<div class="spacer"><!--Content here--></div>
<!--Keeps the container from collapsing without
having to specify a height-->
<span> </span>
</div>
</td>
.container {
position: relative;
}
.content {
position: absolute;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.spacer {
height: 0;
overflow: hidden;
}
几天前我也遇到了同样的挑战。看来路西法·萨姆找到了最好的解决办法。
但我注意到你应该在spacer元素复制内容。认为它不是那么糟糕，但我也想应用标题弹出剪切文本。这意味着长文本将在我的代码中出现第三次。
在这里，我建议在伪元素之后访问title属性以生成间隔并保持HTML干净。
适用于IE8+， FF, Chrome, Safari, Opera
<table border="1">
<tr>
<td class="ellipsis_cell">
<div title="This cells has more content">
<span>This cells has more content</span>
</div>
</td>
<td class="nowrap">Less content here</td>
</tr>
</table>
.ellipsis_cell > div {
position: relative;
overflow: hidden;
height: 1em;
}
/* visible content */
.ellipsis_cell > div > span {
display: block;
position: absolute;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1em;
}
/* spacer content */
.ellipsis_cell > div:after {
content: attr(title);
overflow: hidden;
height: 0;
display: block;
}
http://jsfiddle.net/feesler/HQU5J/
使用一些css hack，似乎显示:table-column;可以来拯救:
.myTable {
display: table;
width: 100%;
}
.myTable:before {
display: table-column;
width: 100%;
content: '';
}
.flexibleCell {
display: table-cell;
max-width: 1px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.staticCell {
white-space: nowrap;
}
<div class="myTable">
<div class="flexibleCell">A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.</div>
<div class="staticCell">Less content</div>
</div>
JSFiddle: http://jsfiddle.net/blai/7u59asyp/
有一个更简单、更优雅的解决方案。
在你想要应用截断的表格单元格中，只需包含一个带有css table-layout: fixed的容器div。这个容器获取父表单元格的全部宽度，因此它甚至可以响应。
确保对表中的元素应用截断。
工作在IE8+
<table>
<tr>
<td>
<div class="truncate">
<h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
</div>
</td>
<td class="some-width">
I'm just text
</td>
</tr>
</table>
和css:
.truncate {
display: table;
table-layout: fixed;
width: 100%;
}
h1.truncated {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
这是一个工作提琴
https://jsfiddle.net/d0xhz8tb/
这个问题在谷歌的顶部弹出，所以在我的例子中，我使用了css代码片段
从https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/，但应用到td没有给出预期的结果。
我不得不在td的文本周围添加一个div标签，省略号终于起作用了。
简写HTML代码;
<table style="width:100%">
<tr>
<td><div class='truncate'>Some Long Text Here</div></td>
</tr>
</table>
缩写CSS;
.truncate { width: 300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
