Css 表布局：固定使用文本溢出：椭圆和第二个文本显示

我是css新手，我已经花了好几个小时寻找这个问题的解决方案。 我在一个可调整大小的容器中有一个固定的布局表。 我有一个调整大小的列，它有两个文本，第一个应该做一个文本溢出：椭圆，而第二个应该总是显示（如果可能的话）。 如果表格单元格不适合，则要求不显示所有文本，而是显示最后5个字母。 我想我会在td中放置两个跨距，并为第二个跨距指定一个宽度，但该宽度被忽略。当我尝试将元素浮动（我只能向左浮动，因为向右浮动会将最后5个字母放在一个包含少量文本的长列的末尾，这是不正确的），向左浮动，但是第一个div没有变小，因此文本溢出：椭圆不适用

例如，当td不足时，我需要：

|Hello budd...ight?|

及

但当td较长时：

|Hello buddy how is it going tonight?                       |

这似乎是一个相当普遍的要求，那么我如何才能实现它呢？ 我不想要任何javascript，我很确定它可以通过css解决，也许还有一些额外的div

我的html：

<table style="table-layout:fixed">
<colgroup>
    <col/>
    <col width="200px"/>
</colgroup>
<tr>
    <td>
        <span class="first">Hello buddy how is it going ton</span>
        <span class="second">ight?</span>
    </td>
    <td></td>
</tr>
</table>

有什么办法可以做到这一点吗？ 非常感谢您的帮助。 谢谢

看来我是。。。以下是更改后的CSS：

span.first{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
/*---这条线以下的一切都是新的--*/
浮动：左；
右侧填充：5ex；
最大宽度：100%；
显示：内联块；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
秒
{
宽度：4ex；
左边距：-5ex；
显示：内联块；
}​

兼容于：

---

我没有测试过Opera或IES，文本是否总是一行，或者在某些情况下它可以流成多行？有人吗？不会那么难吧！！！求你了，求你了！！！我想出了几种方法，如果TD是文本的大小或更小，它们就可以工作。。。但是，如果TD比文本更宽，则没有任何效果：/

<table style="table-layout:fixed">
<colgroup>
    <col/>
    <col width="200px"/>
</colgroup>
<tr>
    <td>
        <span class="first">Hello buddy how is it going ton</span>
        <span class="second">ight?</span>
    </td>
    <td></td>
</tr>
</table>

table
{
     width: 90%;
     margin: 10px;   
}

tr
{
    height: 100px;
}
td
{
    width: 50%;   
    border: 1px solid blue;
    padding: 5px;
    height: 100px;
    vertical-align: top;
    position: relative;
    while-space:nowrap;
}

span.first {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  border: 1px solid red;   

}
span.second
{
    border: 1px solid green;
}