CSS：将溢出内容隐藏到bootstrap btn-group中

Question

例如我有桌子：

/* Styles go here */
    
    table.my {
      width: 600px;
    }
    
    table.my > tr {
      height: 40px;
      overflow: hidden;
    }
    
    .tag {
      background: #b8b8b8;
      padding: 4px;
      color: blue;
    }
    
    .tag-area{
      display: inline;
    }
    
    .name {
      width: 400px;
      height: 100%;
      display: inline-block;
    }

<table class="table table-striped table-hover my">
        <tbody>
          <tr>
            <td>1</td>
            <td>
              <span class="name">Ammy Holdings</span>
              <div class="tag-area">
                <span class="tag">iOS</span>
                <span class="tag">PM</span>
                <span class="tag">Android</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>
              <span class="name">Ken Martins</span>
              <div class="tag-area">
                <span class="tag">PM</span>
                <span class="tag">CTO</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>3</td>
            <td>
              <span class="name">Ammy Holdings</span>
              <div class="tag-area">
                <span class="tag">iOS</span>
                <span class="tag">PM</span>
                <span class="tag">Android</span>
                <span class="tag">CEO</span>
                <span class="tag">Sale</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

看起来如此：

如您所见：溢出标签位置错误... 但是我不能把这些尺寸放到我的桌子里，我需要将溢出的内容放入组中，如下所示：

我没有任何想法，怎么做。 也许SO社区可以给我一些想法？如何将溢出内容放入button group（bootstrap）？

你可以在这里检查风格和 plunker ：

http://plnkr.co/edit/5qSDb6BGvskS0iwncZdi?p=preview

btw：我在真正的应用程序中使用angularjs ...