2

我有一个 HTML 表格，用作网格视图的列标题。单击列标题会触发使网格视图排序的 javascript，并且显示列已排序的图标显示在列文本旁边，类似于以下内容：

|---------------------------------------------------------------------------------|
| <span> Column 1 </span> <div class="sortImgSprite" /> | <span> Column 2 </span> |
|---------------------------------------------------------------------------------|

该表格具有表格布局：固定，文本范围具有溢出：隐藏，文本溢出：省略号，空白：nowrap。

当文本很长时，我确实得到了我想要的省略号效果，但是排序图标精灵（设置了宽度和背景的 div）被从表格单元格的右侧剪掉了。有什么建议可以通过 CSS 确保排序图标优先于省略文本的空间？如果一列是“排序的”，我希望排序 img 始终存在并且具有文本椭圆而不是文本将 img 推出单元格的可见空间：

4

3 回答 3

2

我不确定您要向图像添加什么浮动，但是您是否尝试过向右浮动并添加大约 5 px 的右边距？那会把它推进去。

于 2009-01-22T00:15:11.397 回答
0

为什么不直接将“sortImgSprite”类添加到<span>标签中呢？既然你是通过 JavaScript 进行排序，你必须有一个表列的句柄？

当用户对列进行排序时，将“sortImgSprite”类添加到左侧或右侧（如果需要，可以添加一点填充）并在该列不再排序时将其删除。

...或者我错过了什么？

啊。我错过了一些东西。认为溢出的文本在列标题下方的行中，而不是在标题本身中。

好的，那么如果您要将类添加到表头怎么办？您的<th>标签（如果这是您使用的）可以使图像与单元格右侧对齐，然后您的<span>标签可以继承该类并添加其他格式（例如文本溢出等）？

同样，您可能需要在 span 的右侧进行填充，以便可以在任何文本后面清楚地看到表格标题单元格的背景图像。

于 2009-01-22T00:21:43.100 回答
0

感谢您的建议！这是我最终通过 CSS 获得我想要的东西：

<html>
<head>
<style type="text/css">
table
{
   table-layout:fixed;
   width: 300px;
}

div.foo
{
   float:right;
   width:25px;
   height:1.2em;
   background-color:green;
}

.bar
{
   margin-right:30px;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}
</style>
</head>

<body>
<table border="1">
   <tr>
      <td>
         <div class="foo"></div>
         <div class="bar" title="This is some text. This is some text. This is some text. This is some text.">This is some text. This is some text. This is some text.</div>
      </td>
   </tr>
</table>
</body>  
</html>
于 2009-01-23T01:17:26.933 回答