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

我试图实现一个响应表宽度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的帮助下使用可用空间”?

  • 用jQueryselectHTML注释
  • 图像预加载器如何工作?
  • 查找与给定input关联的html标签
  • 将variables分配给{%include%}标签Django中的子模板
  • HTML:如何限制file upload只能是图片?
  • 隐藏/显示HTML表格中的列
  • 变暗的CSS背景图像?
  • 边缘顶部嵌套的div
  • 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; }