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个字，然后多出来的就显示为省略号

举报该问题

其他回答

第1个回答 2011-03-30

text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
在li里添加上这三句就行了，少加一条都不行。
这样可以溢出省略号，要是直接让它超出部分隐藏，就overflow:hidden;就可以的。
但是，上面给你的在FF上是没有效果的。只能隐藏超出部分，在其他浏览器上是会溢出省略号的。

第2个回答推荐于2016-03-05

1.你要固定li盒子的宽度，即width:xxx;
2.因为默认的是文字长度超过父容器的宽度时候，文字会换行，所以要确定里面的文字不换行即white-space:nowrap;
3.超出文本用省略号显示，即 text-overflow:ellipsis;

第3个回答推荐于2016-04-09

<!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">

</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

本回答被提问者采纳

第4个回答 2011-03-30

你就最好用JS写，或者jquery。先找出所有的在.technique下的li，弄一个for循环，用substring获得li里面你需要显示的内容，然后把获得的内容+......显示在li里。这不是唯一的办法，上网找找应该有这种例子

相似回答

CSS如何实现单行和多行文本溢出显示省略号答：接下来重点说一说多行文本溢出显示省略号，如下。实现方法：display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;效果如图：适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；注：1、-webkit-line-clamp用来限制在一个块元素显示的文本...

CSS 一段文本怎么设置超过省略号显示答：多行文本溢出显示省略号实现方法：实现效果：适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

CSS怎么设置li里的列表内容字数限制?答：CSS对元素内的内容做字数限制，可以利用css的overflow: hidden属性解决了这个问题。例子：li {width:80px;height:30px;line-height:30px;overflow:hidden;} 说明：设置li的宽度和高度，超出部分就会被隐藏。overflow:hidden这个属性的作用是隐藏溢出。

css里面怎么让文字长的时候两行显示,最多两行,多余的省略号显示,最重要...答：1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的<style>标签中，输入css代码：div{ width: 100px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;} 3、浏览器运行index.html页面，此时文字超过2行会...

大家正在搜

表格怎么适应字数的长度 word不同数量的字长度一样如何调整行数和字数不同字数一样长度哈哈哈字数长度对照表 word中不同字数一样长度怎么设置每行的字数怎么筛选数字长度如何按字数排序