文本溢出：省略号表细胞无宽度

Question

我想实现看起来像这样的中间单元的响应表格的宽度text-overflow: ellipsis;：

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

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

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

Answer 1

[更新] 我的道歉，似乎不工作“就是这样”：http://jsfiddle.net/kQKfc/1/

会离开它虽然这里，因为它的某些情况下，它的伎俩我们。
[/更新]

我们有这个CSS在我们的项目，给它一个镜头：

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

Answer 2

这是不是一个真正的干净的解决方案，但它不使用JS和每一个浏览器我的作品经过测试。

我的解决方案在于将单元格的内容包装在table-layout: fixed和width: 100%的表格中。

查看demo。

下面是完整的解决方案：

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

---

这不是真的清楚什么是对侧键的意图，所以我用white-space: nowrap，让他们在同一线。根据使用情况，您可能更愿意应用min-width并自然让他们换行。

Answer 3

在桌子上设置你的宽度为100％，并指定一个fixed表格的布局：

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

然后，设置取下列表格单元格应该有省略号：

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

瞧！响应式表省略号溢出！

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

Answer 4

的清洁器的方法是简单地设置对TD一个最大宽度。

基于@法布里西奥磨砂的答复，

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> 

而且

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

我不知道为什么这个工作，但这样做，因此，如果有人可以计算出为什么应用最大宽度的原因，然后请让我知道，因为我是通过ac做的意外事件。

Answer 5

经过几个小时的轰动，没有解决方案，终于找到了它。

你想要的基础溢出的元素是最小/最大宽度，其中最大值低于最小宽度。然后，您可以溢出语言或其子项，您可以在其中选择任何方式进行设置：％，px，auto。

我在多个棘手的情况下尝试过它，它在所有方面都有效。

我会尝试用我的例子发布一个幻灯片，但这应该会帮助你去。

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

Answer 6

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

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

诀窍是建立一个表的布局与第一占用剩余空间中的小区（ 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%; 
} 

然后添加您的限制自己的文本。

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