CSS：截断表单元格，但尽可能适合
与Fred见面。 他是一张桌子：
<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>
这样做很有效，但是弗雷德有一种唠叨的感觉，如果他的右边格子（他被戏称为塞尔利多）放弃了一点空间，他的左格将不会被截断。 你能保存他的理智吗？
总之：一个表格的单元格如何均匀地溢出，只有当它们全部放弃了空格时
<table border="1" style="width: 100%;"> <colgroup> <col width="100%" /> <col width="0%" /> </colgroup> <tr> <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td> <td style="white-space: nowrap;">Less content here.</td> </tr> </table>
我相信我有一个非JavaScript的解决scheme！ 迟到总比不到好，对吧？ 毕竟这是一个很好的问题，Google已经完成了。 我不想解决一个JavaScript的修复，因为我发现页面加载后，东西移动的轻微抖动是不可接受的。
特点 ：
- 没有JavaScript
- 没有固定布局
- 没有权重或百分比的技巧
- 适用于任意数量的列
- 简单的服务器端生成和客户端更新（不需要计算）
- 跨浏览器兼容
它是如何工作的 ：在表格单元格内，将两个内容副本放置在相对定位的容器元素中的两个不同元素中。 间隔元件是静态定位的，因此会影响表格单元的宽度。 通过允许间隔单元的内容包装，我们可以得到我们正在寻找的表格单元的“最适合”宽度。 这也允许我们使用绝对定位的元素来限制可见内容的宽度到相对定位的父元素的宽度。
经过testing和工作：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; }
我前几天面对同样的挑战。 看来路西法山姆 find了最好的解决办法。
但我注意到你应该在间隔元素上复制内容。 认为这不是很糟糕，但我也想应用titlepopup剪辑文本。 这意味着长文本将在我的代码中第三次出现。
在这里我build议访问title属性:after伪元素:after生成spacer并保持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; }
如果Javascript是可以接受的，我可以把一个快速的例程作为起点。 它dynamic地尝试使用跨度的内部宽度来调整单元格宽度，以响应窗口大小调整事件。
目前假定每个单元格通常占用行宽的50％，并且会折叠右侧单元格以保持左侧单元格的最大宽度以避免溢出。 你可以实现更复杂的宽度平衡逻辑，这取决于你的用例。 希望这可以帮助：
用于testing的行的标记：
<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); } }); });
有一个更简单，更优雅的解决scheme。
在要应用截断的表格单元中，只需使用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/
问题是创build均匀间隔固定宽度列的“table-layout：fixed”。 但禁用此CSS属性将杀死文本溢出，因为表将变得尽可能大（而不是注意溢出）。
对不起，但在这种情况下，弗雷德不能把他的蛋糕吃了..除非房东给Celldito更less的空间来工作，弗雷德不能使用他..
你可以尝试“加重”某些列，如下所示：
<table border="1" style="width: 100%;"> <colgroup> <col width="80%" /> <col width="20%" /> </colgroup> <tr> <td>This cell has more content.</td> <td>Less content here.</td> </tr> </table>
您还可以尝试一些更有趣的调整，例如使用0％宽度的列和使用某些white-space CSS属性的组合。
<table border="1" style="width: 100%;"> <colgroup> <col width="100%" /> <col width="0%" /> </colgroup> <tr> <td>This cell has more content.</td> <td style="white-space: nowrap;">Less content here.</td> </tr> </table>
你明白了。
是的，我会说三十有它，没有办法做，除非你使用JS方法。 您正在讨论一组复杂的渲染条件，您将不得不定义。 例如，如果两个单元格对于公寓来说都太大，你将不得不决定谁有优先权，或者仅仅给他们一定比例的面积，如果他们已经满了，他们都会占用这个面积，只有当他们有空白你伸展你的腿在另一个单元格，无论哪种方式没有办法与CSS做到这一点。 尽pipe人们用css做了一些非常时髦的事情，我还没有想到。 我真的怀疑你可以做到这一点。
就像samplebias的答案一样，如果Javascript是一个可以接受的答案，我为此专门制作了一个jQuery插件： https ： //github.com/marcogrcr/jquery-tableoverflow
要使用插件只需键入
$('selector').tableoverflow();
完整的例子： http : //jsfiddle.net/Cw7TD/3/embedded/result/
编辑：
- 修复IE浏览器兼容性的jsfiddle。
- 修复jsfiddle更好的浏览器兼容性（Chrome，Firefox，IE8 +）。
使用一些CSS的黑客，似乎display: table-column; 可以来抢救：
<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>
.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; }
JSFiddle： http : //jsfiddle.net/blai/7u59asyp/
检查“nowrap”是否在某种程度上解决了这个问题。 注意：nowrap在HTML5中不受支持
<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;"> <tr> <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >This cells has more content </td> <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >Less content here has more content</td> </tr>
你可以将右侧单元格的宽度设置为所需宽度的最小值，然后将溢出隐藏+文本溢出应用到左侧单元格的内部，但是Firefox在这里是错误的…
虽然，似乎flexbox可以提供帮助
我最近一直在努力。 看看这个jsFiddletesting ，试着改变基表的宽度来检查行为）。
解决scheme是将表embedded另一个表中：
<table style="width: 200px;border:0;border-collapse:collapse"> <tbody> <tr> <td style="width: 100%;"> <table style="width: 100%;border:0;border-collapse:collapse"> <tbody> <tr> <td> <div style="position: relative;overflow:hidden"> <p> </p> <p style="overflow:hidden;text-overflow: ellipsis;position: absolute; top: 0pt; left: 0pt;width:100%">This cells has more content</p> </div> </td> </tr> </tbody> </table> </td> <td style="white-space:nowrap">Less content here</td> </tr> </tbody> </table>
现在弗雷德对Celldito的扩张感到满意吗？
不知道这是否会帮助任何人，但我解决了类似的问题，通过指定每个列的特定宽度大小的百分比。 显然，如果每列的内容宽度不会变得太宽，这将是最好的。
我有同样的问题，但我需要显示多行（其中text-overflow: ellipsis;失败）。 我使用TD的textarea解决它，然后将其设置为表格单元格。
textarea { margin: 0; padding: 0; width: 100%; border: none; resize: none; /* Remove blinking cursor (text caret) */ color: transparent; display: inline-block; text-shadow: 0 0 0 black; /* text color is set to transparent so use text shadow to draw the text */ &:focus { outline: none; } }
鉴于“table-layout：fixed”是基本的布局要求，这将创build均匀间隔的不可调整的列，但是您需要制作不同百分比宽度的单元格，也许将单元格的“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％设置为4，将20％设置为1。
