首先 ，bootstrap中當td內容超過我給的固定寬度時，省略號代替的代碼如下：
<table class="table table-bordered"> <thead> <tr> <th class="center" style='width:38%;'>商品名稱</th> <th class="center" style='width:36%;'>詳細介紹</th> <th class="center" style='width:22%;'>購買數量</th> </tr> </thead> <tbody id="tbody"> <tr> <td>自由行機票享超值優惠</td> <td>隨心所欲安排行程</td> <td>70</td> </tr> <tr> <td>自由行機票享超值優惠</td> <td>隨心所欲安排行程</td> <td>70</td> </tr> <tr> <td>自由行機票享超值優惠</td> <td>隨心所欲安排行程</td> <td>70</td> </tr> </tbody> </table>.table tbody tr td{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; }移動端模擬器顯示效果是這樣的。不是很舒服,完全沒按我給他的寬度顯示，全靠內容擠出來的。
解決方法：
<table class="table table-bordered" style='table-layout:fixed;'>
也就是添加樣式
table{ table-layout:fixed;}效果出現：
table-layout用來顯示表格單元格、行、列的算法規則。值 描述
automatic 默認。列寬度由單元格內容設定。
fixed 列寬由表格寬度和列寬度設定。
inherit 規定應該從父元素繼承 table-layout 屬性的值。
總結
以上所述是小編給大家介紹的bootstrap表格內容過長時用省略號表示的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
