Jquery中文網 www.uhadif.co
Jquery中文網 >  CSS教程  >  正文 CSS控制的內容超過容器寬度后顯示省略號

CSS控制的內容超過容器寬度后顯示省略號

發布時間:2019-11-09   編輯:www.uhadif.co
jquery中文網為您提供CSS控制的內容超過容器寬度后顯示省略號等資源,歡迎您收藏本站,我們將為您提供最新的CSS控制的內容超過容器寬度后顯示省略號資源
<script>ec(2);</script>

一般我們看到的比如新聞列表,為了使文字不回行,控制字數,會通過程序讓多余的字符顯示省略號,我們只使用CSS可以達到同樣的效果,雖然不完美。

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代碼如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy4868')">復制代碼</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy4868>li {
     width:50px;
     white-space:nowrap;
     text-overflow:ellipsis;
     overflow: hidden;
     }
</td> </tr> </table>

首先是一個容器,可以是div,li,td等等,先定義寬度,“white-space:nowrap”是強制在一行內顯示所有文本,不回行。“text-overflow:ellipsis”就是關鍵了。
text-overflow是CSS3新增的屬性,IE6以上版本支持。它可以帶2個參數:clip [不顯示省略標記(...),而是簡單的裁切],ellipsis[當對象內文本溢出時顯示省略標記(...)]。所以,這個方法是不支持Firefox的。因此,我們還要加上一句overflow: hidden,讓多余文字在ff中隱藏。
雖然打到了效果,但是因為用程序控制這種效果也很方便,而且沒有瀏覽器兼容性的問題,所以用CSS控制的方法就顯得雞肋了。

</td> </tr> </table>

您可能感興趣的文章:
文本有關的樣式和jQuery求對象的高寬問題分別說明
jquery獲取div寬度的實現思路與代碼
JQuery獲取元素文檔大小、偏移和位置和滾動條位置的方法集合
jQuery 動態酷效果實現總結
解決dedecms內容頁圖片過大不顯示或撐破表格
批處理教程之FOR的參數/F之delims詳解
JS獲取屏幕、瀏覽器窗口大小、網頁高度寬度的方法詳解
jQuery滑動插件 Moving Boxes
seo優化之企業網站標題怎么定位
C語言 的 整型數據和浮點型數據

[關閉]
北京pk赛车历史 用友股票 北京pk拾稳赚技巧5码 尊鼎配资 内蒙古快三技巧 上证股票指数是什么意思 十一选五体彩开奖 天津11选5开奖结果 股票是跌了买还是涨 多江西彩开奖结果 湖南快乐十分投注网址 25选五开奖号码 2019停牌的股票都有哪些 时时彩官方平台 好运彩彩票app怎么样 秒速赛车官方网站开奖 短线股票推荐 46