CSS(js)限制頁面顯示的文本字符長度
更新時間：2012年12月27日 17:46:09 作者：
限制頁面顯示的字符長度，一直被眾多網(wǎng)友傾睬，本人也是一fans利用閑暇時間搜集整理了一些實用技巧,需要了解的朋友可以參考下
復(fù)制代碼 代碼如下:
<nav class="cf_nav clearfix">
<ul>
<li>
<a title="首頁">
<div class="nav_block">
<span>首頁</span>
<span class="hover">首頁</span>
</div>
</a>
</li>
<li>
<a title="投稿">
<div class="nav_block">
<span>投稿</span>
<span class="hover">投稿</span>
</div>
</a>
</li>
<li>
<a title="私信 ">
<div class="nav_block">
<span>私信 </span>
<span class="hover">私信 </span>
</div>
</a>
</li>
<li>
<a title="存檔">
<div class="nav_block">
<span>存檔</span>
<span class="hover">存檔</span>
</div>
</a>
</li>
<li>
<a title="訂閱">
<div class="nav_block">
<span>訂閱</span>
<span class="hover">訂閱</span>
</div>
</a>
</li>
如果我在限制上面的span中的字符。
$("nav_block span").wordLimit(8);
它使用了下面的一個算定義jquery插件的方法，這是我從點點網(wǎng)扣下來的：
復(fù)制代碼 代碼如下:
// copyright c by zhangxinxu v1.0 2009-09-05
// http://www.zhangxinxu.com
/* $(".test1").wordLimit(); 自動獲取css寬度進行處理，如果css中未對.test1給定寬度，則不起作用
$(".test2").wordLimit(24); 截取字符數(shù)，值為大于0的整數(shù)，這里表示class為test2的標(biāo)簽內(nèi)字符數(shù)最多24個
*/
(function($){
$.fn.wordLimit = function(num){
this.each(function(){
if(!num){
var copyThis = $(this.cloneNode(true)).hide().css({
'position': 'absolute',
'width': 'auto',
'overflow': 'visible'
});
$(this).after(copyThis);
if(copyThis.width()>$(this).width()){
$(this).text($(this).text().substring(0,$(this).text().length-4));
$(this).html($(this).html()+'...');
copyThis.remove();
$(this).wordLimit();
}else{
copyThis.remove(); //清除復(fù)制
return;
}
}else{
var maxwidth=num;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'...');
}
}
});
}
})(jQuery);
相關(guān)文章
js監(jiān)控IE火狐瀏覽器關(guān)閉、刷新、回退、前進事件
本節(jié)主要介紹了js監(jiān)控IE火狐瀏覽器關(guān)閉、刷新、回退、前進事件的方法2014-07-07
JS+CSS實現(xiàn)實用的單擊輸入框彈出選擇框的方法
這篇文章主要介紹了JS+CSS實現(xiàn)實用的單擊輸入框彈出選擇框的方法,實例分析了javascript操作select及button的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了js+HTML5基于過濾器從攝像頭中捕獲視頻的方法,涉及javascript基于html5元素操作多媒體的使用技巧,需要的朋友可以參考下2015-06-06
canvas有一個神奇的方法getImageData，它可以獲取canvas內(nèi)圖像的每一個像素點的顏色值獲取，而且可以改變。本文將對canvas實現(xiàn)圖片的濾鏡轉(zhuǎn)化的方法進行介紹，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
下面小編就為大家?guī)硪黄褂迷鷍s+canvas實現(xiàn)模擬心電圖的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
js實現(xiàn)動態(tài)添加、刪除行、onkeyup表格求和示例
動態(tài)添加、刪除行想必大家并不陌生，下面為大家介紹通過js是如何實現(xiàn)的，有此需求的朋友可不要錯過了哈2013-08-08
這篇文章主要介紹了微信小程序訂閱消息功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
當(dāng)一個網(wǎng)站有很多js代碼要加載，js代碼放置的位置在一定程度上將會影像網(wǎng)頁的加載速度，為了讓我們的網(wǎng)頁加載速度更快，本文總結(jié)了一下幾個注意點，分享給大家2015-05-05
通常我們有一份webpack.dev.config.js使用webpack-dev-server的proxy，代理到開發(fā)服務(wù)器，來解決本地跨域問題。假如項目變大，可能需要proxy到不同環(huán)境，那么如何解決webpack-dev-server代理常切換問題，下面就一起來了解一下2019-01-01
這篇文章主要為大家詳細(xì)介紹了Bootstrap?table列上下移動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02