如何打破響應表格單元格中的單詞？

我有下表，其中包含3列。在移動視圖中，我成功地封裝了電子郵件，但包含此電子郵件的單元格仍然包含未封裝的電子郵件，如下面的打印屏幕中所示。如何打破響應表格單元格中的單詞？

HTML：

<table class="table-responsive"> 
    <tr> 
     <td id="email-td" class="col-xs-6"> 
      <a href="mailto:[email protected]">[email protected]</a>     
     </td> 
     <td class="col-xs-5"> 
      Blanditiis id dolores maxime blanditiis. Aut sunt quia cupiditate reprehenderit et. 
     </td> 
     <td class="col-xs-1"> 
      <button class="btn btn-danger"></button> 
      <button class="btn btn-default"></button> 
     </td> 
    </tr> 
</table>

CSS：

#email-td { 
    /*max-width: */ 
    display: inline-block; 
    word-wrap: break-word; 
}

小提琴here。

怎樣才能讓這個郵件表適合在12列視圖？

來源

2017-06-20 Warrio

請勿對錶使用引導列。「col-xs-6」最適合div。如果你想讓它響應，我會使用div標籤而不是表格重新創建你的html。表格從來沒有真正做出響應，並且手動修復它們的無響應令人煩惱地很難。

來源

2017-06-20 15:29:05

是的，這是真的，不錯的想法，而不是使用div標籤;） – Warrio

如何打破響應表格單元格中的單詞？

回答

相關問題