1

我需要这样的东西

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

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

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

这都是针对单行文本的。右列 (b) 是固定宽度，整个块 (c) 具有最大宽度。左列 (a) 应该是最小的，但是如果 cb 中没有足够的空间，应该有省略号。

我尝试使用老式表格和各种 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>

更新二

我在这里合并了所有发现：http: //frightanic.com/web-authoring/ellipsis-in-table-columns/

4

2 回答 2

2

试试旧的表格结构：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 保持在同一行。

于 2012-10-18T21:04:38.413 回答
0

这可以在不支持它的浏览器中添加省略号并优雅地降级：

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
于 2012-10-18T20:56:53.023 回答