Bootstrap 3 tràn bảng ra khỏi bảng điều khiển

Question

Tôi đang sử dụng bảng khởi động bên trong bảng điều khiển, bị tràn bên ngoài bảng nếu chứa thông tin dài, cách có thể sửa lỗi?

<div class="col-sm-3" role="complementary"> 

<div class="panel panel-default"> 
    <div class="panel-body table-responsive"> 
    <table class="table table-bordered table-condensed f11"> 
     <tr> 
      <td colspan="2" align="center" class="info"><b>Info</b></td> 
     </tr> 
     <tr> 
      <td width="35%"><b>Agent</b></td> 
      <td width="65%">Luckystar Auto</td> 
     </tr> 
     <tr> 
      <td><b>WhatsApp</b></td> 
      <td>5412876542</td> 
     </tr> 
     <tr> 
      <td><b>WeChat</b></td> 
      <td>Luckystar88899</td> 
     </tr> 
     <tr> 
      <td><b>Facebook</b></td> 
      <td>www.facebook.com/luckystar88899-abcd</td> 
     </tr> 
    </table> 
    </div> 
</div> 

<div class="panel panel-default"> 
    <div class="panel-body"> 


     <p><div id="map-canvas"></div></p> 
    </div> 
</div> 

Answer 1

Nó sẽ xảy ra kể từ khi liên kết url là quá rộng.

Một cách giải quyết là sử dụng CSS ellipsis để cắt xén nội dung di động khi cần thiết:

.table { 
    table-layout:fixed; 
} 

.table td { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 

} 

Demo: http://bootply.com/128979