文本溢出：表格单元格中没有宽度的省略号
我试图实现一个响应表宽度text-overflow: ellipsis; 在这样的中间单元格中：
| Button 1 | A one-lined text that is too long and has to be... | Button 2 |
整个桌子应该有width: 100%; 与设备一样大。 因为应用程序是多语言的（尽pipemax-width应该是可能的），所以我不能在Button 1和Button 2上设置固定的宽度。
我可以尝试任何我想要的，只有当我设置一个固定的宽度时才会出现。 我怎么能告诉中间单元“没有JavaScript的帮助下使用可用空间”？
这不是一个干净的解决scheme，但它不使用JS，并在我testing过的每个浏览器中都能正常工作。
我的解决scheme是将单元格的内容封装在table-layout: fixed和width: 100% table-layout: fixed 。
看演示 。
以下是完整的解决scheme：
<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; }
不太清楚侧边button的意图是什么，因此我使用了white-space: nowrap来保持它们在同一条线上。 根据使用情况，您可能更喜欢使用min-width并让它们自然分行。
在表格上设置100％的宽度，并指定一个fixed表格布局：
table { width: 100%; table-layout: fixed; }
然后，为下面的表格单元格设置省略号：
td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
瞧！ 响应式表省略号溢出！
演示： http : //jsfiddle.net/VyxES/
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; }
更简单的方法是简单地在td上设置最大宽度。
基于@FabrícioMatté的回复，
<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; }
我不知道为什么这个工作，但它确实如此，所以如果有人可以知道为什么应用最大宽度的作品，那么请让我知道，因为我是偶然的。
在我的头撞了几个小时，没有解决scheme，终于find了。
你想要的基础溢出的元素是最小/最大宽度，其中最大值低于最小宽度。 然后你可以溢出这个lement或者它的一个孩子，你可以用你select的方式来设置：％，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;
[更新]我的道歉，似乎不工作，就像那样： http : //jsfiddle.net/kQKfc/1/
但是会留在这里，因为它在某些情况下对我们有诀窍。
[/更新]
我们有这个CSS在我们的项目，给它一个镜头：
.nowr { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
干得好
<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>
诀窍是build立一个单元格的表格布局，首先占用剩余空间（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; }
