调试易

<table>
     <tr>
          <td width="300" class="jh" id="jh">
               <ul>
                    <li>...</li>
                    <li>...</li>
                    <li>...</li>
                    <li>...</li>
                    .
                    .
                    .
               </ul>
               <span id="more"><a id="gd" href="#">显示更多</a></span>
          </td>
     </tr>
</table>比如有这样的结构，如何做到：
1、在页面上看到的：内容只能显示一行，多余的li隐藏，并且在行尾跟着“显示更多”（一行内显示）
2、点击“显示更多”全部显示出来，紧跟“收起”(点击收起回到1状态)
3、如果<ul>内容在一行内可以显示完，那么最后的“<span>”就不显示条件：1、<li>中的内容长度不固定，所以<li>的宽度不能定死(但是再长也能在一行内放下)  2、一个<li>的内容不能分两行显示(要显示完整)
请各位高手帮帮忙，谢谢