文本溢出:表格单元格中没有宽度的省略号

我试图实现一个响应表宽度text-overflow: ellipsis; 在这样的中间单元格中:

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

整个桌子应该有width: 100%; 与设备一样大。 因为应用程序是多语言的(尽pipemax-width应该是可能的),所以我不能在Button 1Button 2上设置固定的宽度。

我可以尝试任何我想要的,只有当我设置一个固定的宽度时才会出现。 我怎么能告诉中间单元“没有JavaScript的帮助下使用可用空间”?

7 Solutions collect form web for “文本溢出:表格单元格中没有宽度的省略号”

这不是一个干净的解决scheme,但它不使用JS,并在我testing过的每个浏览器中都能正常工作。

我的解决scheme是将单元格的内容封装在table-layout: fixedwidth: 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é的回复,

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

我不知道为什么这个工作,但它确实如此,所以如果有人可以知道为什么应用最大宽度的作品,那么请让我知道,因为我是偶然的。

在我的头撞了几个小时,没有解决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; } 
  • 有一个前景等同于背景图像在CSS?
  • 如何让Firefox自动刷新文件更改?
  • Angular JS - 编辑内容编辑
  • 如何设置图像的宽度和高度而不伸展它?
  • 在已标记的input元素上使用“aria-labelledby”的目的是什么?
  • networkingpath引用URI / Scheme相对URL
  • <fieldset>resize错误; 似乎有不可移动的`min-width:min-content`
  • 什么“<html xmlns =”http://www.w3.org/1999/xhtml“>”呢?