bootstrap表格內容過長時用省略號表示詳解

本文主要介紹了bootstrap表格內容過長時用省略號表示的解決方法,需要的朋友可以參考下，希望能幫助到大家。

首先，bootstrap中當td內容超過我給的固定寬度時，省略號代替的程式碼如下：

【相關影片推薦：Bootstrap教學#】

<table class="table table-bordered">
   <thead>
     <tr>
       <th class="center" style=&#39;width:38%;&#39;>商品名称</th>
       <th class="center" style=&#39;width:36%;&#39;>详细介绍</th>
       <th class="center" style=&#39;width:22%;&#39;>购买数量</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=&#39;table-layout:fixed;&#39;>

#也就是新增樣式

table{
 table-layout:fixed;
}

效果出現：

##table-layout用來顯示表格單元格、行、列的演算法規則。值 描述

automatic 預設。列寬度由儲存格內容設定。

fixed 列寬由表格寬度和列寬度設定。
inherit 規定應該從父元素繼承 table-layout 屬性的值。

相關推薦：

CSS限制顯示字數超出部分用省略號表示

如何實作隱藏多餘的字用省略號取代

css多行省略號相容性寫法

以上是bootstrap表格內容過長時用省略號表示詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！