1、id
<p id="cut_str" title="您好, 溫州市鹿城區南浦社區衛計服務中心(330302018) 南浦衛計中心">您好, 溫州市鹿城區南浦社區衛計服務中心(330302018) 南浦衛計中心</p>
<script>
//js控制文字過多隱藏
function cutString(str, len) {
//length屬性讀出來的漢字長度爲1
if(str.length*2 <= len) {
return str;
}
var strlen = 0;
var s = "";
for(var i = 0;i < str.length; i++) {
s = s + str.charAt(i);
if (str.charCodeAt(i) > 128) {
strlen = strlen + 2;
if(strlen >= len){
return s.substring(0,s.length-1) + "...";
}
} else {
strlen = strlen + 1;
if(strlen >= len){
return s.substring(0,s.length-2) + "...";
}
}
}
return s;
}
var str = document.getElementById('cut_str').innerHTML;
var s=cutString(str,36);//控制顯示文字字符數
document.getElementById('cut_str').innerHTML=s;
</script>
2、class ( cutString(str,len)部分代碼與id完全一樣 )
<p class="cut_str" title="您好, 溫州市鹿城區南浦社區衛計服務中心(330302018) 南浦衛計中心">您好, 溫州市鹿城區南浦社區衛計服務中心(330302018) 南浦衛計中心</p>
<p class="cut_str" title="您好, 溫州市鹿城區南浦社區衛計服務中心(330302018) 南浦衛計計中心</p>
//js控制文字過多隱藏
function cutString(str, len) {
//length屬性讀出來的漢字長度爲1
if(str.length*2 <= len) {
return str;
}
var strlen = 0;
var s = "";
for(var i = 0;i < str.length; i++) {
s = s + str.charAt(i);
if (str.charCodeAt(i) > 128) {
strlen = strlen + 2;
if(strlen >= len){
return s.substring(0,s.length-1) + "...";
}
} else {
strlen = strlen + 1;
if(strlen >= len){
return s.substring(0,s.length-2) + "...";
}
}
}
return s;
}
$(".cut_str").each(function(){
$(this).html(cutString($(this).html(),20));
});
//以下document.getElementsByClassName()方法 IE8不支持!!!!!
var aStr = document.getElementsByClassName('cut_str');
for(var i=0; i<aStr.length; i++){
var str= aStr[i].innerHTML;
var s=cutString(str,30);//控制顯示文字字符數
aStr[i].innerHTML=s;
}
方法二:
不用加css3的相關樣式,直接用jquery
<ul class="box">
<li><a href="#">人員檔案維護</a></li>
<li><a href="#">人員調動</a></li>
</ul>
.box li {
height: 40px;
}
box li a {
width: 300px;
line-height: 20px;
}
<script>
$(".box li").each(function(i){
var divH = $(this).height();
var $p = $("a", $(this)).eq(0);
while ($p.outerHeight() > divH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});
</script>