Html 文本溢出：表格单元格中的省略号没有宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14826992/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text-overflow: ellipsis in table-cell without width
提问by kraftwer1
I'm trying to achieve a responsive table width text-overflow: ellipsis;in the middle cell that looks like this:
我正在尝试text-overflow: ellipsis;在中间单元格中实现响应式表格宽度，如下所示：
| Button 1 | A one-lined text that is too long and has to be... | Button 2 |
| Button 1 | A one-lined text that is too long and has to be... | Button 2 |
The whole table should have width: 100%;to be as large as the device. I can't set a fixed width on Button 1nor Button 2since the application is multilingual (a max-widthshould be possible though).
整个桌子必须width: 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 帮助的情况下告诉中间单元格“使用可用空间”？
回答by Fabrício Matté
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: fixedand width: 100%.
我的解决方案包括将单元格的内容用table-layout: fixed和包裹在表格中width: 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: nowrapto keep them in the same line. Depending on the use case, you may prefer to apply a min-widthand let them line-break naturally.
目前还不清楚侧边按钮的意图是什么，因此我习惯于white-space: nowrap将它们保持在同一行。根据用例，您可能更喜欢应用 amin-width并让它们自然换行。
回答by pete
Set your 100% width on the table and specify a fixedtable-layout:
在表格上设置 100% 宽度并指定fixed表格布局：
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!
瞧！带有省略号溢出的响应表！
回答by babich.ss
HTML
HTML
<tr>
<td>
<span class="ellipsis"> A very looooooooooooooooooooooooooooooong string</span>
</td>
</tr>
CSS
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;
}
回答by Gerald
A cleaner way would be to simply set a max-width on the td.
更简洁的方法是简单地在 td 上设置最大宽度。
Based on @Fabrício Matté's reply,
基于@Fabrício Matté 的回复，
<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.
我不知道这为什么有效，但确实如此，所以如果有人能弄清楚为什么应用 max-width 有效，那么请告诉我，因为我是无意中做到的。
回答by alfatreze
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.
您想要用于溢出底部的元素需要最小/最大宽度，其中最大小于最小宽度。然后您可以溢出元素或其子元素，您可以在其中使用您选择的任何方式设置：％，像素，自动。
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.
我会尝试用我的例子发布一个 fiidle，但这应该会帮助你前进。
/* 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;
回答by Hashbrown
<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;
}
回答by TweeZz
[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;
}
