text-overflow：没有宽度的表格单元格中的省略号

I'm trying to achieve a responsive table width text-overflow: ellipsis; in the middle cell that looks like this:

我正在尝试实现响应表宽度文本溢出：省略号;在中间单元格中，如下所示：

| Button 1 | A one-lined text that is too long and has to be... | Button 2 |

|按钮1 |一个单行的文本，太长，必须... |按钮2 |

The whole table should have width: 100%; to be as large as the device. I can't set a fixed width on Button 1 nor Button 2 since the application is multilingual (a max-width should be possible though).

整个表应有宽度：100％;和设备一样大。我不能在Button 1和Button 2上设置固定宽度，因为应用程序是多语言的（尽管应该可以使用max-width）。

I can try whatever I want, the ... only appears when I set a fixed width. How can I tell the middle cell to "use the space available" without the help of JavaScript?

我可以尝试任何我想要的东西，......只有当我设置固定宽度时才会出现。如何在没有JavaScript帮助的情况下告诉中间单元“使用可用空间”？

7 个解决方案

#1

This is not really a clean solution, but it uses no JS and works in every browser I've tested.

这不是一个干净的解决方案，但它不使用JS，并且可以在我测试过的每个浏览器中使用。

My solution consists in wrapping the cell's contents inside a table with table-layout: fixed and width: 100%.

我的解决方案包括将单元格的内容包装在一个表格中，表格布局：固定，宽度：100％。

See the demo.

看演示。

Here's the full solution:

这是完整的解决方案：

<table class="main-table">
    <tr>
        <td class="nowrap">Button 1</td>
        <td>
            <table class="fixed-table">
                <tr>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</td>
                </tr>
            </table>
        </td>
        <td class="nowrap">Button 2</td>
    </tr>
</table>

.main-table {
    width: 100%;
}

.fixed-table {
    /* magic */
    width: 100%;
    table-layout: fixed;

    /*not really necessary, removes extra white space */
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}
.fixed-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nowrap {
    /* used to keep buttons' text in a single line,
     * remove this class to allow natural line-breaking.
     */
    white-space: nowrap;
}

It's not really clear what's the intent for the side buttons, hence I've used white-space: nowrap to keep them in the same line. Depending on the use case, you may prefer to apply a min-width and let them line-break naturally.

目前还不清楚侧按钮的意图是什么，因此我使用了white-space：nowrap来保持它们在同一条线上。根据使用情况，您可能更喜欢应用最小宽度并让它们自然换行。

#2

Set your 100% width on the table and specify a fixed table-layout:

在表格上设置100％宽度并指定固定的表格布局：

table {
    width: 100%;
    table-layout: fixed;
}

Then, set the following for whichever table cell should have the ellipsis:

然后，为具有省略号的表格单元格设置以下内容：

td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Voila! Responsive table with an ellipsis overflow!

瞧！带有省略号溢出的响应表！

Demo: http://jsfiddle.net/VyxES/

演示：http：//jsfiddle.net/VyxES/

#3

HTML

<tr>
    <td>
        <span class="ellipsis"> A very looooooooooooooooooooooooooooooong string</span>
    </td>
</tr>

CSS

td {
    position: relative;
}

.ellipsis {
    /*Here is the trick:*/
    position: absolute;
    width: 100%;
    /*End of the trick*/

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#4

A cleaner way would be to simply set a max-width on the td.

更简洁的方法是简单地在td上设置最大宽度。

Based on @Fabrício Matté's reply,

基于@FabrícioMatté的回复，

http://jsfiddle.net/V83Ae/89/

<table class="main-table">
<tr>
    <td class="nowrap">Button 1</td>
    <td class="truncate">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</td>
    <td class="nowrap">Button 2</td>
</tr>

And

和

body { margin: 0; }

.main-table {
    width: 100%;
}

.truncate {
    text-overflow: ellipsis;
    white-space  : nowrap;
    overflow     : hidden;
    max-width    : 100px; /* Can be any size, just small enough */
}

.nowrap {
    white-space: nowrap;
}

I have no idea why this works, but it does, so if someone can figure how why applying a max-width works then please let me know as I did it by accident.

我不知道为什么会这样，但它确实如此，所以如果有人可以知道为什么应用最大宽度的工作，那么请让我知道，因为我偶然做到了。

#5

After banging my head for hours, with no solution that worked, finally found it.

在敲了几个小时之后，没有解决方案可行，终于找到了。

The element you want for the base of the overflow nees a min/max width, where the max is inferior to the min width. You can then overflow the lement or a child of it, where you can set the with whatever way you choose: %, px, auto.

您想要溢出底部的元素需要最小/最大宽度，其中max最小值小于最小宽度。然后你可以溢出它或它的孩子，你可以用你选择的任何方式设置：％，px，auto。

I tried it in more than one tricky situation and it works on all.

我在不止一个棘手的情况下尝试了它，它适用于所有。

I'll try to post a fiidle with my examples but this should help you going.

我会尝试用我的例子发布一个文件，但这应该可以帮助你。

/* Apply on base element for proper overflow */
max-width: 1px;
min-width: 10000px;

/* Apply on self or child, according to need */
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

#6

[update] My apologies, does not seem to work 'just like that': http://jsfiddle.net/kQKfc/1/

[更新]我的道歉，似乎并不像'那样'：http：//jsfiddle.net/kQKfc/1/

Will leave it here though, because it certain situations it does the trick for us.
[/update]

将它留在这里，因为在某些情况下它对我们起作用。 [/更新]

We have this css in our project, give it a shot:

我们在项目中有这个css，试一试：

.nowr
{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#7

Here you go

干得好

<div class="container">
  <div>
    Button 1
  </div>
  <div class="fill">
    <div class="lockText">
      A one-lined text that is too long and has to be...
    </div>
  </div>
  <div>
    Button 2
  </div>
</div>

The trick is to set up a table layout with a cell that takes up leftover space first (css tables, mind you!).

诀窍是设置一个表格布局，其中一个单元格首先占用剩余的空间（css表，请注意！）。

.container {
  display: table;
  width: 100%;
}

.container > div {
  display: table-cell;
  white-space: nowrap;
  position : relative;
  width : auto;

  /*make it easier to see what's going on*/
  padding : 2px;
  border : 1px solid gray;
}

.container > .fill {
  width : 100%;
}

Then add your text that constrains itself within.

然后添加限制自身的文本。

.lockText {
  position : absolute;
  left : 0;
  right : 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#1