CSS如何设定li盒子里字数的长度，大于了就显示省略号
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS如何设定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个字，然后多出来的就显示为省略号
white-space:nowrap;
overflow:hidden;
在li里添加上这三句就行了，少加一条都不行。
这样可以溢出省略号，要是直接让它超出部分隐藏，就overflow:hidden;就可以的。
但是，上面给你的在FF上是没有效果的。只能隐藏超出部分，在其他浏览器上是会溢出省略号的。 参考技术B 1.你要固定li盒子的宽度，即width:xxx;
2.因为默认的是文字长度超过父容器的宽度时候，文字会换行，所以要确定里面的文字不换行 即white-space:nowrap;
3.超出文本用省略号显示，即 text-overflow:ellipsis; 参考技术C <!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>
参考资料：http://www.wzsky.net/html/Website/CSS/88097.html
本回答被提问者采纳 参考技术D 你就最好用JS写，或者jquery。先找出所有的在.technique下的li，弄一个for循环，用substring获得li里面你需要显示的内容，然后把获得的内容+......显示在li里。这不是唯一的办法，上网找找应该有这种例子滑动门出现的背景---实例微信导航栏（a盒子里面包span盒子，文字写在span里）
需求：
制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，其中最大的问题是字数不同，如何做？
解决：
用一个a包含span来制作，字数放在span里面。
此时span里面字数多一点，也可以撑开盒子，实现这个效果。（用到了css spirit 精灵图和滑动门技术）
实例：微信导航栏代码
核心：
1. a 盒子里面包 span 盒子
2. a盒子里，调整背景图片位置，设置成：绿色左半边
2. span盒子里，也调整背景图片的位置，设置成：红色右半边，再span里面放文字，文字多，就自动撑开 （像滑动门推开的效果）
（所用到的背景图片如下：
）
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 a { 8 margin: 100px; 9 height: 33px; 10 display: inline-block; 11 background: url(images/to.png) no-repeat; 12 color: #fff; 13 text-decoration: none; 14 line-height: 33px; 15 padding-left: 15px; 16 } 17 span { 18 display: inline-block; 19 height: 33px; 20 background: url(images/to.png) no-repeat right; 21 padding-right: 15px; 22 } 23 </style> 24 </head> 25 <body> 26 <a href="#"> 27 <span>你好我是测试字数特别多的首页导航</span> 28 </a> 29 </body> 30 </html>
效果：
以上是关于CSS如何设定li盒子里字数的长度，大于了就显示省略号的主要内容，如果未能解决你的问题，请参考以下文章