Question

我需要这样的东西

------------------------------
| Some text | fixed-teeeeext |
------------------------------

-----------------------------------
| Some long text | fixed-teeeeext |
------------------------------------

-----------------------------------------
| Some very long te... | fixed-teeeeext |
-----------------------------------------
|<-         a        ->|<-     b      ->|
|<-                 c                 ->|

这是一行文字的全部内容。右列（b）是固定宽度的，整个块（c）具有最大宽度。左列（a）应该是最小的，但如果c-b中没有足够的空间，则应该有省略号。

我尝试了一个老式的桌子和各种CSS两列布局，但我被卡住了。

更新

这适用于FF但不适用于IE9：

<table style="font-family: sans-serif;">
  <tr>
    <td style="max-width: 307px; 
               overflow: hidden; 
               text-overflow: ellipsis; 
               white-space: nowrap; 
               display:block; 
               font-weight: bold;">Lorem ipsum dolor sit amet, consectetur </td>
    <td style="width: 123px; color: #545556; font-size: 15px;">ST.2012.10.17.006</td>
  </tr>
</table>

更新II

我在此处整合了所有调查结果：http://frightanic.com/web-authoring/ellipsis-in-table-columns/

Answer 1

尝试旧表结构：1行，2个单元格，第2个单元格具有固定宽度。对于第一个单元格，添加以下CSS：

.longTd {
border: 1px solid black;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display:block;
}

display:block是这里代码的关键部分。

编辑IE9兼容性，而不是表结构，使用内联块Div元素：

.longDiv{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
display:inline-block;
max-width:200px;
}
.shortDiv{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
display:inline-block;
width:100px;
}

然后HTML：

<div class="longDiv">
Lorem ipsum dolor sit amet, consectetur blah di blah
</div>
<div class="shortDiv">
Not much text here
</div>

内联块将两个Div保持在同一行。

Answer 2

This用于添加省略号并在不支持它的浏览器中优雅地降级：

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

具有固定右列和最小左列的双列布局

2 个答案: