首页手记 css与jq 截取字符串的简单方法

css与jq 截取字符串的简单方法

标签：

JavaScript CSS3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="tips" content="为了以后方便，把常用的小效果制作整理，所以效果都没有测过IE6,如有问题或者更好的方法，请告知！谢谢！！！！联系邮箱：30860662@qq.com">
<title>jq与css截取字符串的简单方法</title>
<style type="text/css">
/css的原理是根据宽度来控制显示多少字符/

/方法一:-----如果用css推荐使用，最新版FF兼容/
.newBox{
width:400px;
background-color:#eee;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

/方法二---- 兼容低版本浏览，但是啰嗦/
.lowBox{
width:400px;
background-color:#eee;
}

.lowBox p span{
float:left;
display: block;/span为行内样式转为块，块才能设置宽度/
width:400px;
max-width:395px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

}

.lowBox p{clear:both;}
.lowBox p:after{
-moz-content:"...";
}
</style>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.7.2.js"></script>
<script>
/方法三：----jq控制/
$(document).ready(function(){
subStr("#jqBox",33)
function subStr(obj,iNum){
var str=$(obj).text();
if(str.length<=iNum){
$(obj).text(str);
}else{
$(obj).text(str.substring(0,iNum)+"...");
$(obj).attr("title",str);
}
}
});
</script>
</head>
<body>
<div class="newBox">
方法一：css--各浏览器的最新版写法各浏览器的最新版写法各浏览器的最新版写法各浏览器的最新版写法各浏览器的最新版写法各浏览器的最新版写法各浏览器的最新版写法各浏览器的最新版写法各浏览器的最新版写法
</div>
<div class="lowBox">
<p>
<span>
方法二：css--兼容低版本FF 兼容低版本FF 兼容低版本FF 兼容低版本FF 兼容低版本FF 兼容低版本FF 兼容低版本FF 兼容低版本FF 兼容低版本FF 兼容低版本FF 兼容低版本FF 兼容低版本FF 兼容低版本FF 兼容低版本FF 兼容低版本FF
</span>
<p>
</div>
<div id="jqBox">
方法三：jq---这是jq截取字符串这是jq截取字符串这是jq截取字符串这是jq截取字符串这是jq截取字符串这是jq截取字符串这是jq截取字符串这是jq截取字符串这是jq截取字符串这是jq截取字符串这是jq截取字符串这是jq截取字符串这是jq截取字符串
</div>
</body>
</html>