标签:
最近比较迷茫,不知道做什么,将自己最近碰到的一些问题整理一下。
网上查了许多解决方法,情况略有不同。
1,单行溢出。css可以直接解决,但多数浏览器都可以支持,
当前标签必须设定宽度
2,多行溢出,限制字符个数溢出
<div class="zxx_text_overflow">限制我的个数是不可能的</div>
<style>
.zxx_text_overflow_6{width:48%; height:180px;}
</style>
<script>
$(document).ready(function(){
//限制字符个数
$(".zxx_text_overflow_5").each(function(){
var maxwidth=50;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+‘...‘);
}
});
});
</script>
3.高度宽度限制 文字溢出
<style>
.zxx_text_overflow_6{width:48%; height:180px;}
</style>
<body>
<div style=" max-width:640px; margin:0 auto; ">
<div class="zxx_text_overflow_6"><p>你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!了啊,天啊!<a href="sss" id="xiangxi" style=" display:none; ">详细</a></p></div>
</div>
<script>
var wordLimit=function(){
$(".zxx_text_overflow_6").each(function(){
var copyThis = $(this.cloneNode(true)).hide().css({
‘position‘: ‘absolute‘,
‘height‘: ‘auto‘,
‘overflow‘: ‘visible‘
});
//alert (xiangxi);
$(this).after(copyThis);
if(copyThis.height()>$(this).height()){
$(this).text($(this).text().substring(0,$(this).html().length-8));
$(this).html($(this).html()+‘...‘);
copyThis.remove();
wordLimit();
}else{
copyThis.remove(); //清除复制
return;
}
});
}
wordLimit();
document.getElementById("xiangxi").style.display=‘block‘;
</script>
最后省略溢出文字,加一个详细的链接,不过效果不是很好,改用css浮动可以控制详细位置
以上大多为网上的代码,网上类似资料比较多,本人页不知道谁的是原版,未标注出处请谅解。
标签:
原文地址:http://www.cnblogs.com/danche/p/4186741.html