html - 溢出时剪切 td 元素中的文本

Question

我有这张表:

<table>
<tr>
    <td style="white-space: nowrap; overflow: hidden;">
         item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1
    </td>
    <td style="white-space: nowrap" >
         item 2 item 2 item 2 item 2 item 2 item 2 item 2 item 2
    </td>
</tr>
</table>

我想做的是:正确的元素必须获得所有空间。如果左侧有剩余空间，则应将左侧元素剪切到可用长度。

我试过 overflow: hidden 属性，但它不起作用。

附言

我不需要省略号

我不能在元素 1 上使用最大宽度，因为我希望元素 2 使用尽可能多的空间

Answer 1

这可能对你有帮助..

 <table>
    <tr>
        <td id='first'>
             item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1
        </td>
        <td id='second>
             item 2 item 2 item 2 item 2 item 2 item 2 item 2 item 2
        </td>
    </tr>
    </table>

    #first{
      display:inline;
      overflow: hidden;
      width:30%;
    }
    #second{
      width:70%;
      }