我如何截断表格单元格，但适合尽可能多的内容?

小开

是的，我会说30tydot有它，没有办法做到这一点，除非你使用js的方法。您谈论的是一组必须定义的复杂呈现条件。例如，当两个单元格对于他们的公寓来说都太大时，会发生什么呢?你必须决定谁有优先级，或者只是简单地给他们一个百分比的区域，如果他们都满了，他们都会占用那个区域，只有当一个单元格有空白时，你才会在另一个单元格中伸展你的腿，无论哪种情况，都没有办法用css做到这一点。尽管人们用css做了一些我没有想到的非常时髦的事情。但我真的怀疑你能做到。

小开

问题在于“table-layout:fixed”，它会创建间距均匀、宽度固定的列。但是禁用这个css属性将杀死文本溢出，因为表将变得尽可能大(并且没有任何东西可以溢出)。

我很抱歉，但在这种情况下，弗雷德不能鱼与熊掌兼得。除非房东一开始就给塞尔迪托更少的工作空间，否则弗雷德就不能使用他的…

小开

检查“nowrap”是否在一定程度上解决了问题。注意:HTML5不支持nowrap

<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>

小开

你可以试着“加权”某些列，像这样:

<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 -width列和使用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>

你懂的。

小开

如果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。

小开

我最近一直在研究它。检查这个jsFiddle测试，尝试自己改变基本表的宽度来检查行为)。

解决方案是将一个表嵌入到另一个表中:

<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>&nbsp;</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>

Fred现在对Celldito的扩张满意吗?

小开

你可以设置右边单元格的宽度为所需宽度的最小值，然后应用overflow-hidden+text-overflow到左边单元格的内部，但是Firefox在这里有bug…

不过，flexbox似乎能帮上忙

小开

就像samplebias答案一样，如果Javascript是一个可接受的答案，我专门为此目的做了一个jQuery插件:https://github.com/marcogrcr/jquery-tableoverflow

要使用插件，只需输入

$('selector').tableoverflow();

完整的例子: http://jsfiddle.net/Cw7TD/3/embedded/result/

编辑:

修复了jsfiddle的IE兼容性问题。
修复jsfiddle中更好的浏览器兼容性(Chrome, Firefox, IE8+)。

小开

不知道这是否对任何人都有帮助，但我通过为每列指定特定的宽度大小来解决类似的问题。显然，如果每个列的内容宽度变化不太大，那么效果最好。

小开

<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>

http://jsfiddle.net/7CURQ/

小开

我相信我有一个非javascript的解决方案!我不想满足于JavaScript的修复，因为我发现页面加载后东西移动的轻微抖动是不可接受的。

特性:

没有JavaScript
没有固定布局
没有加权或百分比宽度技巧
适用于任意数量的列
简单的服务器端生成和客户端更新(不需要计算)
跨浏览器兼容的

它是如何工作的:在表格单元格中，在相对位置的容器元素的两个不同元素中放置内容的两个副本。spacer元素是静态定位的，因此会影响表格单元格的宽度。通过允许间隔单元的内容物包裹，我们可以得到“最适合”的;我们正在寻找的表格单元格的宽度。这也允许我们使用绝对定位元素将可见内容的宽度限制为相对定位父元素的宽度。

测试和工作在:IE8, IE9, IE10, Chrome, Firefox, Safari, Opera

结果图像:

Nice proportional width Nice proportional clipping

.

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>&nbsp;</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弹出剪切文本。这意味着长文本将在我的代码中出现第三次。

在这里，我建议从:after伪元素中访问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，似乎display: 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/ < / p >

小开

我有同样的问题，但我需要显示多行(其中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;
}
}

小开

简单地将以下规则添加到你的td:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;

例子:

table {
width: 100%
}


td {
white-space: nowrap;
}


.td-truncate {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
max-width: 0;
}

<table border="1">
<tr>
<td>content</td>
<td class="td-truncate">long contenttttttt ttttttttt ttttttttttttttttttttttt tttttttttttttttttttttt ttt tttt ttttt ttttttt tttttttttttt ttttttttttttttttttttttttt</td>
<td>other content</td>
</tr>
</table>

< >强PS: 如果你想将自定义宽度设置为另一个td，使用属性min-width.

小开

这个问题在谷歌的顶部弹出，所以在我的例子中，我使用了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; }

小开

<table style="table-layout: fixed; max-width: 100%;">
<tr>
<td>
<div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">This cells has more content</div>
</td>
<td>Less content here</td>
</tr>
</table>