怎么设置div超出部分不显示或者显示省略号


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>0000</title> 
<style type="text/css"> 
<!-- 
.listbox {
width:300px;
margin-bottom:6px;
overflow:hidden;
}
.listbox ul {
padding-left:16px;
line-height:28px;
overflow:hidden;
}
.listbox li{
float:left;
width:240px;
padding:0 0 0 20px;
overflow:hidden;
}
.listbox li span{
float:right
}
--> 
</style> 
</head> 
<body> 
<div class="listbox">
     <ul>
      <li><span>2009-10-22</span><a href="#" target="_blank">链接1</a></li>
      <li><span>2009-10-22</span><a href="#" target="_blank">链接1链接2</a></li>
      <li><span>2009-10-22</span><a href="#" target="_blank">链接1链接2链接3</a></li>
      <li><span>2009-10-22</span><a href="#" target="_blank">链接1链接2链接3链接4</a></li>
      <li><span>2009-10-22</span><a href="#" target="_blank">链接1链接2链接3链接4链接5</a></li>
      <li><span>2009-10-22</span><a href="#" target="_blank">链接1链接2链接3链接4链接5链接6</a></li>
     </ul>
   </div>
</body> 
</html>

10 个解决方案

#1


不显示就是overflow:hidden
显示省略号要截取的

#2


overflow:hidden

#3


1.后台控制。如果内容实在过长,就应该后台控制。前台最多只显示十几二十几的字符的话,你后台取出几百个上千个字符干嘛呢?徒然浪费带宽资源还非常不利于SEO。这个可以利用后台的字符操作函数实现。

2.前台控制。如果内容超出的不太多,为了能够适应前台布局的小范围改变,用下面的CSS来实现也是个好选择,以免后台控制得过分死板导致布局的小改变都要引起后台程序的修改。

#div的ID
{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
...其它设置
}

根据情况去决定是单独使用,还是混合使用。

#4


引用 3 楼 theforever 的回复:
1.后台控制。如果内容实在过长,就应该后台控制。前台最多只显示十几二十几的字符的话,你后台取出几百个上千个字符干嘛呢?徒然浪费带宽资源还非常不利于SEO。这个可以利用后台的字符操作函数实现。

2.前台控制。如果内容超出的不太多,为了能够适应前台布局的小范围改变,用下面的CSS来实现也是个好选择,以免后台控制得过分死板导致布局的小改变都要引起后台程序的修改。

#div的ID
{
  ……


这个是正确的,不过不支持 ff chrome ie9

现在很蛋疼,这该死的浏览器。。。

#5


width: 300px;
height: 30px;
overflow: hidden;

#6



<!doctype html>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
*{font-size:14px;margin:0;padding:0}
div{
width:200px; white-space:nowrap;
text-overflow:ellipsis; -o-text-overflow:ellipsis;
overflow:hidden;
}
</style>
</head>
<body>
<br/>
<br/>
<br/>
<div>
<a href="#">反对反对反对反对反对反对反对范德法地方。</a>
</div>
</body>
</html>




楼主 试试

#7


楼上的方法正解,除了FF中不能显示...外,目前好像其它的浏览器还是可以了

#8


引用 3 楼 theforever 的回复:
1.后台控制。如果内容实在过长,就应该后台控制。前台最多只显示十几二十几的字符的话,你后台取出几百个上千个字符干嘛呢?徒然浪费带宽资源还非常不利于SEO。这个可以利用后台的字符操作函数实现。

2.前台控制。如果内容超出的不太多,为了能够适应前台布局的小范围改变,用下面的CSS来实现也是个好选择,以免后台控制得过分死板导致布局的小改变都要引起后台程序的修改。

#div的ID
{
 ……


++

#9


引用 7 楼 happy175 的回复:
楼上的方法正解,除了FF中不能显示...外,目前好像其它的浏览器还是可以了



我在 ff 7.0.1 下测试通过,可能 低一点的版本不行,没试

#10


<style type="text/css">
*{ margin:0; padding:0; font-size:12px; font-family:"新宋体"}
ol{ background:url(http://www.hemin.cn/blog/wp-content/uploads/2009/06/list.jpg) no-repeat left -2px}
li{position:relative; padding:0 60px 0 20px;  height:20px; overflow:hidden; line-height:20px; width:250px; list-style:none}
li a{ position:relative; background: url(http://www.hemin.cn/blog/wp-content/uploads/2009/10/pot.gif) no-repeat 230px top;word-break:break-all;
word-wrap:break-word;display:inline-block; text-decoration:none; color:#000; padding-right:12px; margin-right:10px}
li a:hover{ text-decoration:underline}
li span{ position:absolute; padding-left:5px; color:#CCC}
</style>
</head>
<body>
<ol>
<li><a href="#">杂技团美女演员的训练</a><span>2009-6-21</span></li>
    <li><a href="#">杂技团美女演员的训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训演员的训练演员的训练</a><span>2009-6-21</span></li>
    <li><a href="#">gghjghkhjkluiisersetrtyrhdukuiuikukuikyukgyu</a><span>2009-6-21</span></li>
    <li><a href="#">杂技团美女演员的训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训演员的训练演员的训练</a><span>2009-6-21</span></li>
    <li><a href="#">练演员的训练</a><span>2009-6-21</span></li>
    <li><a href="#">练演员的训演员的训练</a><span>2009-6-21</span></li>
    <li><a href="#">练演员的训练演员的训练练</a><span>2009-6-21</span></li>
    <li><a href="#">练演员的练</a><span>2009-6-21</span></li>
    <li><a href="#">练演员的训练</a><span>2009-6-21</span></li>
</ol>
</body>
智能推荐

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告