CSS: скрыть содержание переполнения в начальной загрузки БТН-группы

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>

и это выглядит так:

как вы можете видеть : теги переполнения расположены неправильно ... , но я не могу положить их в свой стол с такими размерами, и мне нужно t о поместить переполнения содержание в группу, например:

и я не какие-либо идеи, как это сделать. Возможно, сообщество SO может дать мне несколько идей? Как разместить содержимое переполнения в button group (бутстрап)?

вы можете проверить стиль и plunker здесь:

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

BTW: Я использую 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>