bootstrap表格內(nèi)容過(guò)長(zhǎng)時(shí)用省略號(hào)表示的解決方法
首先 ，bootstrap中當(dāng)td內(nèi)容超過(guò)我給的固定寬度時(shí)，省略號(hào)代替的代碼如下：
<table class="table table-bordered">
<thead>
<tr>
<th class="center" style='width:38%;'>商品名稱</th>
<th class="center" style='width:36%;'>詳細(xì)介紹</th>
<th class="center" style='width:22%;'>購(gòu)買數(shù)量</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>自由行機(jī)票享超值優(yōu)惠</td>
<td>隨心所欲安排行程</td>
<td>70</td>
</tr>
<tr>
<td>自由行機(jī)票享超值優(yōu)惠</td>
<td>隨心所欲安排行程</td>
<td>70</td>
</tr>
<tr>
<td>自由行機(jī)票享超值優(yōu)惠</td>
<td>隨心所欲安排行程</td>
<td>70</td>
</tr>
</tbody>
</table>
.table tbody tr td{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
移動(dòng)端模擬器顯示效果是這樣的。不是很舒服,完全沒(méi)按我給他的寬度顯示，全靠?jī)?nèi)容擠出來(lái)的。
解決方法：
<table class="table table-bordered" style='table-layout:fixed;'>
也就是添加樣式
table{
table-layout:fixed;
}
效果出現(xiàn)：
table-layout用來(lái)顯示表格單元格、行、列的算法規(guī)則。值 描述
automatic 默認(rèn)。列寬度由單元格內(nèi)容設(shè)定。
fixed 列寬由表格寬度和列寬度設(shè)定。
inherit 規(guī)定應(yīng)該從父元素繼承 table-layout 屬性的值。
總結(jié)
以上所述是小編給大家介紹的bootstrap表格內(nèi)容過(guò)長(zhǎng)時(shí)用省略號(hào)表示的解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript時(shí)間轉(zhuǎn)換處理函數(shù)
這篇文章主要介紹了JavaScript時(shí)間轉(zhuǎn)換處理函數(shù)的方法的相關(guān)資料,需要的朋友可以參考下2015-04-04
javascript實(shí)現(xiàn)數(shù)字倒計(jì)時(shí)特效
這篇文章主要介紹了javascript實(shí)現(xiàn)網(wǎng)頁(yè)倒計(jì)時(shí)數(shù)字時(shí)鐘效果，是一款非常實(shí)用的javascript倒計(jì)時(shí)特效,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-03-03
在線編輯器的實(shí)現(xiàn)原理(兼容IE和FireFox)
在線編輯器的實(shí)現(xiàn)原理(兼容IE和FireFox)...2007-03-03
用JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了用JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
微信小程序與h5的相互跳轉(zhuǎn)場(chǎng)景分析
這篇文章主要介紹了微信小程序與h5的相互跳轉(zhuǎn)場(chǎng)景分析,在微信小程序內(nèi)編寫(xiě)webview文件,通過(guò)webview去跳轉(zhuǎn)h5,loadUrl為h5的地址,非嵌套,h5需要跳轉(zhuǎn)打開(kāi)某個(gè)微信小程序,需要的朋友可以參考下2023-10-10
簡(jiǎn)單實(shí)現(xiàn)js選項(xiàng)卡切換效果
這篇文章主要為大家介紹了簡(jiǎn)單實(shí)現(xiàn)js選項(xiàng)卡切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
js實(shí)現(xiàn)二代身份證號(hào)碼驗(yàn)證詳解
本文給大家分享一段超級(jí)全面的二代身份證號(hào)碼驗(yàn)證程序，由JS編寫(xiě)而成，可以校驗(yàn)身份證的地址碼、出生日期碼、順序碼和數(shù)字校驗(yàn)碼。是身份證去偽存真的一大利器。2014-11-11
JavaScript實(shí)現(xiàn)圖片本地預(yù)覽功能【不用上傳至服務(wù)器】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片本地預(yù)覽功能,針對(duì)非IE瀏覽器的HTML5濾鏡功能及IE瀏覽器的相關(guān)組件功能實(shí)現(xiàn)不上傳至服務(wù)器預(yù)覽本地圖片的效果,需要的朋友可以參考下2017-09-09
微信小程序?qū)崿F(xiàn)兩邊小中間大的輪播效果的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)兩邊小中間大的輪播效果的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了JS實(shí)現(xiàn)的四叉樹(shù)算法,簡(jiǎn)單分析了四叉樹(shù)的相關(guān)概念、原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下2018-12-12