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

Question

例如我有一张 table :

/* 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 社区可以给我一些想法？如何将溢出内容放入按钮组(bootstrap)？

您可以在此处检查样式和plunker:

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

顺便说一句:我在真正的应用程序中使用 angularjs...

Answer 1

在您的代码中包含 Bootstrap 它将解决您的问题并且结果与您提供的 plunk 相同..

/* 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;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
  <script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<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>
  <br>
  <h4>Must be</h4>
  <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>
        <div class="btn-group">
          <button type="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <em>...</em>
          </button>
          <ul class="dropdown-menu">
            <li>Android</li>
            <li>CEO</li>
            <li>Sale</li>
          </ul>
        </div>
      </div>
    </td>
  </tr>
</tbody>
  </table>