<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body , p {
margin:0;
padding:0;
}
body {
font:12px/24px Verdana, Geneva, sans-serif;
}
.demo {
width:120px;
height:120px;
overflow-x:hidden;
overflow-y:auto;
margin:100px;
border:solid 1px #CCC;
}
.demo a {
display:block;
height:24px;
padding:0 10px;
overflow:hidden;
white-space:nowrap;
word-break:keep-all;
text-overflow:ellipsis;
}
</style>
<script type="text/javascript" src="js/jQuery-1.7.1.js"></script>
<script type="text/javascript">
$(function() {
$('.demo').hover(function() {
$(this).find('a').css('float' , 'left');
$(this).stop(true, true).animate({
width: '540px'
} , 500 , function() {});
} , function() {
$(this).find('a').css('float' , 'none');
$(this).stop(true, true).animate({
width: '120px'
} , 500 , function() {});
});
});
</script>
</head>
<!--南宫俊:2012-08-21-->
<body>
<div class="demo">
<p><a href="#">生活生活生活生活生活生活生活生活生活1</a></p>
<p><a href="#">生活2</a></p>
<p><a href="#">生活3</a></p>
<p><a href="#">生活生活生活生活4</a></p>
<p><a href="#">生活生活生活5</a></p>
<p><a href="#">生活6</a></p>
<p><a href="#">生活7</a></p>
<p><a href="#">生活生活生活生活生活生活生活生活生活生活8</a></p>
</div>
</body>
</html>
这是普遍做列表的时候,希望列表内容超宽的时候以省略号做代替显示的一个例子。
现在用jquery对该容器做一些特效,即当鼠标放置于容器上的时候,容器将展开到一定的长度,这里是240px,并且,容器内的内容将float:left;除ie6、7外的浏览器都显示是正常的,如图正常显示效果
在ie7下显示效果为
最后是以省略号来显示超宽的文字的。
找到的解决办法是:
首先,当不对overflow进行设置的时候,overflow的默认值为visible。所以,我们在js中,让overflow设置为visible,就可解决此省略号问题。
一下是修改的代码
<style type="text/css">
body , p {
margin:0;
padding:0;
}
body {
font:12px/24px Verdana, Geneva, sans-serif;
}
.demo {
width:120px;
height:120px;
overflow-x:hidden;
overflow-y:auto;
margin:100px;
border:solid 1px #CCC;
}
.demo a {
display:block;
height:24px;
padding:0 10px;
overflow:hidden;
white-space:nowrap;
word-break:keep-all;
text-overflow:ellipsis;
}
.demo a.flow {
float:left;
overflow:visible;
}
</style>
<script type="text/javascript" src="js/jQuery-1.7.1.js"></script>
<script type="text/javascript">
$(function() {
$('.demo').hover(function() {
$(this).find('a').addClass('flow');
$(this).stop(true, true).animate({
width: '540px'
} , 500 , function() {});
} , function() {
$(this).find('a').removeClass('flow');
$(this).stop(true, true).animate({
width: '120px'
} , 500 , function() {});
});
});
</script>
分享到:
相关推荐
我们在IE 6内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden。 解决这个bug很简单,在父元素中使用position:relative;即可解决该bug 我的办法:子元素设置绝对定位,父元素相对定位,这样...
因为绝对定位的子元素会从内向外寻找有定位的父元素,找不到的话overflow:hidden;也会随之失效。 一探究竟 重要的事再说一遍,正如上述所言,overflow:hidden;失效的原因是:父元素想要隐藏溢出的绝对定位的子元素,...
原来这样设置,IE6、IE7、FF都是可以实现的,但IE8不可以,原因是IE把overflow:hidden禁止了。如果实现同样的效果,要添加样式display:inline-block;height:30px;/*高度是想要设置的高度*/这样就可以实现了。
css中overflow:hidden CSS样式可以隐藏溢出的部分 好处就是可以防止网页变形
overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌。当某一个属性拥有这么多的功能时,难免使人难以把握,不过不要怕,只要信:看完这篇文章,我相信你绝对能对...
在父标签中使用了overflow:hidden;时,如果子标签中有元素的position设置成relative的时候,在IE6和IE7中父元素的overflow对其将不起作用,其实将父标签的position也设置成relative便可解决此问题
overflow: hidden; 如何隐藏上面部分的实现方式 纯html代码,举例说明思路 <div style="width: 100px;height:100px;overflow:auto"> <div>1 <div>2 <div>3 <div>4 <div>5 <div>6 </div>
实际上用了overflow:hidden 会影响 list-style,即当ul 中的li 的overflow 为hidden的时候, list-style不起作用,不显示前面的点、圈等样式。 解决办法:在ul或li内加入样式:list-style-position: inside; 即可。...
令人蛋疼的IE,IE6/IE7下父元素有相对/绝对定位时,子元素在IE6和IE7下overflow:hidden;失效。 情况一:(在parent上增加position:relative) 复制代码代码如下: <style type=”text/css”> .parent{ width:...
css - flex + overflow:hidden
禁用页面滚动条的方法有很多,但最简单、最快的也就数overflow: hidden了,下面是禁用html及body滚动条的方法,兼容IE6、7
1.overflow:hidden的作用是隐藏溢出比如: 复制代码代码如下: <div xss=removed id=1><div id=2></div><div> 当ID=2的这个DIV高度设定的宽度超过了300px,那么超出的部分将自动被隐藏 2.line-height指的是在DIV中...
由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性,所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
大家对CSS属性中overflow:hidden并不陌生,至于它的应用,在下文中列出我在项目中,运用到此属性的例子,感兴趣的朋友可以参考下哈,希望对大家有所帮助
在下图中有一个dojo的select,当选项过长,在IE9中没法显示正确。 css设置如下,overflow:hidden没有起作用。 复制代码代码如下: .my-select { max-width: 200px; overflow: hidden; word-break: break-all; text-...
项目中常常有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?
当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效。