Html CSS：截断表格单元格，但尽可能适合

CSS: Truncate table cells, but fit as much as possible

提问by s4y

Meet Fred. He's a table:

认识弗雷德。他是一张桌子：

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

Fred's apartment has a bizarre habit of changing size, so he's learned to hide some of his content so as not to push all the other units over and shove Mrs. Whitford's living room off into oblivion:

Fred 的公寓有一个奇怪的习惯，改变大小，所以他学会了隐藏他的一些内容，以免将所有其他单元推倒并将 Whitford 夫人的客厅推入遗忘：

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

This works, but Fred has a nagging feeling that if his right cell (which he's nicknamed Celldito) gave up a little space, his left cell wouldn't be truncated quite as much of the time. Can you save his sanity?

这行得通，但 Fred 有一种唠叨的感觉，如果他的右侧单元格（他的昵称 Celldito）放弃一点空间，他的左侧单元格不会在很多时候被截断。你能拯救他的理智吗？

---

---

In summary: How can a table's cells overflow evenly, and only when they've all given up all their whitespace?

总结：表格的单元格如何均匀溢出，并且只有当它们全部放弃所有空白时？

回答by ladislav

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

http://jsfiddle.net/7CURQ/

回答by Lucifer Sam

I believe I have a non-javascript solution! Better late than never, right? After all this is an excellent question and Google is all over it. I didn't want to settle for a javascript fix because I find the slight jitter of things moving around after the page is loaded to be unacceptable.

我相信我有一个非 JavaScript 的解决方案！迟到总比不到好，对吧？毕竟这是一个很好的问题，谷歌已经解决了。我不想满足于 javascript 修复，因为我发现页面加载后移动的轻微抖动是不可接受的。

Features:

特点：

• No javascript
• No fixed-layout
• No weighting or percentage-width tricks
• Works with any number of columns
• Simple server-side generation and client-side updating (no calculation necessary)
• Cross-browser compatible

• 没有 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.

工作原理：在表格单元格内，在相对定位的容器元素内的两个不同元素中放置两个内容副本。间隔元件是静态定位的，因此会影响表格单元格的宽度。通过允许间隔单元格的内容换行，我们可以获得我们正在寻找的表格单元格的“最佳拟合”宽度。这也允许我们使用绝对定位元素将可见内容的宽度限制为相对定位父元素的宽度。

Tested and working in: IE8, IE9, IE10, Chrome, Firefox, Safari, Opera

测试和工作：IE8、IE9、IE10、Chrome、Firefox、Safari、Opera

Result Images:

结果图像：

JSFiddle: http://jsfiddle.net/zAeA2/

JSFiddle：http: //jsfiddle.net/zAeA2/

Sample HTML/CSS:

示例 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;
}

回答by Henry Feesler

I've been faced the same challenge few days ago. It seems Lucifer Samfoundthe best solution.

几天前我也面临着同样的挑战。似乎Lucifer Sam找到了最好的解决方案。

But I noticed you should duplicate content at spacer element. Thought it's not so bad, but I'd like also to apply titlepopup for clipped text. And it means long text will appear third time in my code.

但是我注意到您应该在间隔元素处复制内容。认为还不错，但我还想title为剪辑文本应用弹出窗口。这意味着长文本将第三次出现在我的代码中。

Here I propose to access titleattribute from :afterpseudo-element to generate spacer and keep HTML clean.

在这里我建议title从:after伪元素访问属性来生成间隔并保持 HTML 干净。

Works on IE8+, FF, Chrome, Safari, Opera

适用于 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/

http://jsfiddle.net/feesler/HQU5J/

回答by samplebias

If Javascript is acceptable, I put together a quick routine which you could use as a starting point. It dynamically tries to adapt the cell widths using the inner width of a span, in reaction to window resize events.

如果 Javascript 可以接受，我整理了一个快速例程，您可以将其用作起点。它动态地尝试使用跨度的内部宽度来调整单元格宽度，以响应窗口大小调整事件。

Currently it assumes that each cell normally gets 50% of the row width, and it will collapse the right cell to keep the left cell at its maximum width to avoid overflowing. You could implement much more complex width balancing logic, depending on your use cases. Hope this helps:

目前它假设每个单元格通常获得行宽的 50%，并且它将折叠右侧单元格以将左侧单元格保持在其最大宽度以避免溢出。根据您的用例，您可以实现更复杂的宽度平衡逻辑。希望这可以帮助：

Markup for the row I used for 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 which hooks up the resize event:

连接调整大小事件的 JQuery：

$(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);
        }
    });
});

回答by satyavh

There's a much easier and more elegant solution.

有一个更简单、更优雅的解决方案。

Within the table-cell that you want to apply truncation, simply include a container div with css table-layout: fixed. This container takes the full width of the parent table cell, so it even acts responsive.

在要应用截断的表格单元格中，只需包含一个带有 css table-layout: fixed 的容器 div。这个容器占据了父表格单元格的整个宽度，所以它甚至可以响应。

Make sure to apply truncation to the elements in the table.

确保对表中的元素应用截断。

Works from IE8+

适用于 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>

and css:

和CSS：

    .truncate {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    h1.truncated {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

here's a working Fiddle https://jsfiddle.net/d0xhz8tb/

这是一个工作小提琴 https://jsfiddle.net/d0xhz8tb/

回答by Andre Haverdings

The problem is the 'table-layout:fixed' which create evenly-spaced-fixed-width columns. But disabling this css-property will kill the text-overflow because the table will become as large as possible (and than there is noting to overflow).

问题是“table-layout:fixed”，它创建了等距固定宽度的列。但是禁用此 css-property 将终止文本溢出，因为表将变得尽可能大（并且不会溢出）。

I'm sorry but in this case Fred can't have his cake and eat it to.. unless the landlord gives Celldito less space to work with in the first place, Fred cannot use his..

我很抱歉，但在这种情况下，弗雷德不能吃他的蛋糕，然后把它吃到……除非房东首先给 Celldito 更少的工作空间，否则弗雷德不能使用他的……

回答by Elliot Cameron

You could try to "weight" certain columns, like this:

您可以尝试“加权”某些列，如下所示：

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

You can also try some more interesting tweaks, like using 0%-width columns and using some combination of the white-spaceCSS property.

您还可以尝试一些更有趣的调整，例如使用 0% 宽度的列和使用white-spaceCSS 属性的某种组合。

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

You get the idea.

你明白了。

回答by user648116

Yep I would say thirtydot has it, there is no way to do it unless you use a js method. You are talking about a complex set of rendering conditions that you will have to define. e.g. what happens when both cells are getting too big for their apartments you will have to decide who has priority or simply just give them a percentage of the area and if they are overfull they will both take up that area and only if one has whitespace will you stretch your legs in the other cell, either way there is no way to do it with css. Although there are some pretty funky things people do with css that I have not thought of. I really doubt you can do this though.

是的，我会说三十点有它，除非你使用 js 方法，否则没有办法做到这一点。您正在谈论一组复杂的渲染条件，您必须定义这些条件。例如，当两个单元格对于他们的公寓来说都变得太大时会发生什么，您将不得不决定谁有优先权，或者只是给他们一定比例的区域，如果他们过满，他们都会占用该区域，并且只有当一个有空白时才会您在另一个单元格中伸展双腿，无论哪种方式，都无法使用 css 来做到这一点。尽管人们用 css 做了一些我没有想到的非常时髦的事情。我真的怀疑你能做到这一点。

回答by Marco

Like samplebias answer, again if Javascript is an acceptable answer, I made a jQuery plugin specifically for this purpose: https://github.com/marcogrcr/jquery-tableoverflow

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

To use the plugin just type

要使用插件，只需输入

$('selector').tableoverflow();

Full example:http://jsfiddle.net/Cw7TD/3/embedded/result/

完整示例：http : //jsfiddle.net/Cw7TD/3/embedded/result/

Edits:

编辑：

• Fix in jsfiddle for IE compatibility.
• Fix in jsfiddle for better browser compatibility (Chrome, Firefox, IE8+).

• 修复 jsfiddle 以实现 IE 兼容性。
• 修复 jsfiddle 以获得更好的浏览器兼容性（Chrome、Firefox、IE8+）。

回答by blai

Use some css hack, it seems the display: table-column;can come to rescue:

使用一些 css hack，似乎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/

JSFiddle：http : //jsfiddle.net/blai/7u59asyp/