CSS如何设定li盒子里字数的长度，大于了就显示省略号
<divclass="technique"><strong><h1>技术支持</h1></strong><ul><li>NSK深沟球轴承的空间容积与润滑脂填充量</li>...
<div class="technique">
<strong><h1>技术支持</h1></strong>
<ul>
<li>NSK深沟球轴承的空间容积与润滑脂填充量</li>
<li>进口轴承拆卸与存放方法</li>
<li>FAG绝缘轴承产品型号列表</li>
<li>可充分发挥进口NSK滚针滚轮轴承产品性能的应用方法</li>
<li>进口轴承代理选择润滑脂四步法</li>
</ul>
</div>
“可充分发挥进口NSK滚针滚轮轴承产品性能的应用方法”这一行太长了，变成两行显示，如何设置允许出现的字数，如16个字，然后多出来的就显示为省略号 展开
<strong><h1>技术支持</h1></strong>
<ul>
<li>NSK深沟球轴承的空间容积与润滑脂填充量</li>
<li>进口轴承拆卸与存放方法</li>
<li>FAG绝缘轴承产品型号列表</li>
<li>可充分发挥进口NSK滚针滚轮轴承产品性能的应用方法</li>
<li>进口轴承代理选择润滑脂四步法</li>
</ul>
</div>
“可充分发挥进口NSK滚针滚轮轴承产品性能的应用方法”这一行太长了，变成两行显示，如何设置允许出现的字数，如16个字，然后多出来的就显示为省略号 展开
4个回答
展开全部
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
在li里添加上这三句就行了，少加一条都不行。
这样可以溢出省略号，要是直接让它超出部分隐藏，就overflow:hidden;就可以的。
但是，上面给你的在FF上是没有效果的。只能隐藏超出部分，在其他浏览器上是会溢出省略号的。
white-space:nowrap;
overflow:hidden;
在li里添加上这三句就行了，少加一条都不行。
这样可以溢出省略号，要是直接让它超出部分隐藏，就overflow:hidden;就可以的。
但是，上面给你的在FF上是没有效果的。只能隐藏超出部分，在其他浏览器上是会溢出省略号的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1.你要固定li盒子的宽度，即width:xxx;
2.因为默认的是文字长度超过父容器的宽度时候，文字会换行，所以要确定里面的文字不换行 即white-space:nowrap;
3.超出文本用省略号显示，即 text-overflow:ellipsis;
2.因为默认的是文字长度超过父容器的宽度时候，文字会换行，所以要确定里面的文字不换行 即white-space:nowrap;
3.超出文本用省略号显示，即 text-overflow:ellipsis;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
/* firefox only */
li:not(p) { /* wtf is? pls let me know*/
clear: both;
}
li:not(p) a {
max-width: 175px;
float: left;
}
li:not(p):after {
content: "...";
float: left;
width: 25px;
padding-left: 5px;
color: #df3a0e;
}
-->
</style>
<ul>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
</ul>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
/* firefox only */
li:not(p) { /* wtf is? pls let me know*/
clear: both;
}
li:not(p) a {
max-width: 175px;
float: left;
}
li:not(p):after {
content: "...";
float: left;
width: 25px;
padding-left: 5px;
color: #df3a0e;
}
-->
</style>
<ul>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
</ul>
参考资料： http://www.wzsky.net/html/Website/CSS/88097.html
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你就最好用JS写，或者jquery。先找出所有的在.technique下的li，弄一个for循环，用substring获得li里面你需要显示的内容，然后把获得的内容+......显示在li里。这不是唯一的办法，上网找找应该有这种例子
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
