Question

当行内字数超出容器宽度时，IE显示不正常，而火孤显示正常，这种情况应该如何调整CSS？

1、当行内字数超出容器宽度时，IE显示不正常，而火孤显示正常，这种情况应该如何调整CSS？
2、如何用CSS设置当字数达到一定长度后，后面的字用省略号(......)代替？
代码如下：

<style type="text/css">
#menu {
border:1px white solid;
width:120px;
background:gray;
margin:0px;
vertical-align:middle;

}
#menu ul {
list-style-type:none;
margin:0px;
padding:0px;
}
#menu ul li{
text-align:right;
padding:0px;
color:black;

border-bottom:1px white solid;
}
#menu a, #menu a:visited {
display:block;
color:white;
text-decoration:none;
border-left:8px solid black;
border-right:1px solid black;
height:30px;
line-height:30px;
overflow:hidden;
}
#menu a:hover {
border-left:8px solid white;
border-right:1px solid black;
}
</style>
<div id="menu">

<ul>
<li><a href="#">item1item1item1item1item1item1item1item1item1</a></li>
<li><a href="#">item1</a>
</li>
<li><a href="#">item1</a>
</li>
<li><a href="#">item1</a>
</li>
</ul>

</div>
....号的代码可以写出来吗？

Answer 1

1、调整宽度，针对不同的浏览器：
style="display:block;width:100px;width:80px\9;*width:80px;-width:80px;"
对应关系为：火狐，IE8，IE7，IE6；你根据自己的div宽度调整像素；

2、在超出去的div的css样式写overflow:hidden;但是计算字数这个需要js，css做不了这个，至少我是不会，呵呵

Answer 2

1、可以用!important;声明样式重要级别，前面的样式FF识别，后面的IE识别，如：
width:10px!important;12px;
2、div a{display:block;width:310px;white-space:nowrap;overflow:hidden;float:left;
-o-text-overflow: ellipsis; /* for Opera */
text-overflow:ellipsis; /* for IE */
}
div:after{content:"...";padding-left:3px;font-size:12px;}/* for Firefox */

Answer 3

回答1、
在#menu里面加
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
就可以了

回答2、单纯CSS只好控制字数，不要自动添加。。。
必须要JavaScript才可以。
回答完毕

Answer 4

overflow: auto;//自动，一般就是自己换行，这个在IE6中很重要

...的话，你后台先截取不就好了

Answer 5

#menu a{display:block; white-space:nowrap;
text-overflow:ellipsis; overflow:hidden; width:100px; }