CSS列标题与IMG - 如何停靠IMG / div来的吧？

StackOverflow https://stackoverflow.com/questions/467603

题

我有作为列标题使用网格视图的HTML表格。点击列标题触发的JavaScript，使网格视图排序，并显示该列进行排序的图标旁边的列文本显示出来，类似于下面：

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

在表中有表格的布局：固定，和用于文本的跨度有溢出：隐藏，文本溢出：省略号，空白：NOWRAP

在文字很长，我得到我想要的省略号效果，但排序图标精灵（分度，宽度和背景组）被修剪掉表格单元格的右侧。任何建议如何确保排序图标得到优先用于经CSS的ellipsizing文本空间？如果列“排序”，我想那种IMG总是在那里，有文字ellipsize而是将文本推IMG出细胞的可视空间的：

有帮助吗？

解决方案

我不知道什么彩车要添加到图像，但你试过浮动的权利，加入约5 PX的右缘？这将内推入。

其他提示

为什么你不只是添加了“sortImgSprite”类的<span>标签呢？既然你反正做通过JavaScript的排序，你必须有一个句柄表列？

当列上的用户排序，添加“sortImgSprite”类的左侧或右侧（也许添加如果需要少许填充）并将其取出时该列不再排序。

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

阿。我已经错过了一些东西。认为这是溢出文本在列标题下面的行，而不是在标题本身。

好了，如果你是对类添加到表头？你<th>标签（如果那是你用什么）可能将图像对准小区的权利，那么你的<span>标签可以继承类，并添加了其他格式（如文本溢出等）？

同样，你可能需要填充你的跨度的右侧，这样的表头单元格的背景图片可以清楚地看到后面的任何文本。

感谢您的建议！下面是我落得这样做来得到我想要通过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>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top