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