实现溢出文本省略号显示
1、css实现
li { width : 30%; text-overflow: ellipsis; white-space: nowrap; /* 限制不换行 */ overflow: hidden; /* 隐藏溢出 */ }
2、css限制显示行数(html5)
p{ display: -webkit-box; -webkit-line-clamp: 3; /*行数*/ -webkit-box-orient: vertical; overflow: hidden; }
3、js限制字数,超出省略号(...)显示
html代码:<p id="con-num"></p>
js代码:截取元素p中字符串的固定长度(比如说64),再赋值给元素p
function broadcast(){ var conTxt = $("#con-num").html(); LimitNumber(conTxt,"con-num"); } /*用js限制字数,超出部分以省略号...显示*/ function LimitNumber(txt,idName) { var str = txt; str = str.substr(0,64) + '...' ; var id=document.getElementById(idName); id.innerText=str; }
substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
function broadcast(){ showHiddenText(t.context); } /*用js限制字数,超出部分以省略号...显示*/ function showHiddenText(content){ var newstr = content; if(content!=null &&content!=""){ if(content.length>64){ newstr = content.substring(0,64)+"..."; } } return newstr; }