單行內(nèi)容：

"width":"100px", "whiteSpace":"nowrap", "overflow":"hidden", "text-overflow":"ellipsis"

前提：固定內(nèi)容容器寬度

要求：

1、禁止文本換行?"whiteSpace":"nowrap"

2、讓溢出文本隱藏 ?"overflow":"hidden" （此處設(shè)置了寬度方可知道文本是在何位置溢出，沒有寬度，無法達(dá)到溢出隱藏效果）

3、讓文本溢出后，末尾出現(xiàn)省略號(hào)?"text-overflow":"ellipsis"

?

多行文本：

??

粘貼自腳本之家，標(biāo)題：CSS(js)限制頁(yè)面顯示的文本字符長(zhǎng)度

// 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);

修改后使用：

$(function(){//限制字符個(gè)數(shù)
//maxwidth:多少個(gè)字（不分漢字、字母） $("a.ms-listlink").each(function(){ var maxwidth = 10; if($(this).text().length > maxwidth ){ $(this).text($(this).text().substr(0,maxwidth)); $(this).html($(this).html() + "…"); //重新賦值再展示，否則只會(huì)展示被截取的 maxwidth個(gè)漢字 } }); });

?僅作用于 Chrome 多行文本控制:

display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;

?

轉(zhuǎn)載于:https://www.cnblogs.com/JaneBlog/p/7239286.html

總結(jié)

以上是生活随笔為你收集整理的内容溢出处理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。