CSS中span内容超出部分以...显⽰
使⽤text-overflow:ellipsis对溢出⽂本显⽰省略号有两个好处：
⼀是不⽤通过程序限定字数；
⼆是有利于SEO。需要使⽤对对溢出⽂本显⽰省略号的通常是⽂章标题列表，这样处理对搜索引擎更友好，因为标题实际上并未被截字，⽽是局限于宽度⽽未被显⽰⽽已。
设置span的属性为：
<style type="text/css">
span{
overflow: hidden;
css去掉滚动条text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space:nowrap;
width:240px;
height:24px;
display:block;
}
</style>
其中，
overflow: hidden和white-space: nowrap都是必须的否则不会显⽰省略号；
-o-text-overflow: ellipsis针对Opera；
⽽宽度的设定主要是针对IE6；
该⽅法⽀持Internet Explorer, Safari, Chrome 和 Opera，但FF并不⽀持，不过可以通过Jquery来实现类似的效果。
下载这个Jquery插件：jQuery ellipsis plugin
调⽤⽅法：
$(document).ready(function() {
$('.ellipsis').ellipsis();
}
其次，溢出隐藏必须设置元素的宽或者⾼，因为你不确定宽或者⾼，也就不知道它超出什么范围才隐藏；
最后，因为只有块级元素才能设置宽和⾼，⽽span是⾏内元素，要转换成块级元素⽤代码display:block。
overflow属性介绍：
定义和⽤法
overflow 属性规定当内容溢出元素框时发⽣的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，⽤户代理都会提供⼀种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
默认值：visible
继承性：no
版本：CSS2
JavaScript 语法：object.style.overflow="scroll"
可能的值
值描述
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显⽰滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显⽰滚动条以便查看其余的内容。
inherit规定应该从⽗元素继承 overflow 属性的值。
text-overflow属性介绍：
定义和⽤法
text-overflow 属性规定当⽂本溢出包含元素时发⽣的事情。
默认值：clip
继承性：no
版本：CSS3
JavaScript 语法：Overflow="ellipsis"
语法
text-overflow: clip|ellipsis|string;
值描述测试clip修剪⽂本。
ellipsis显⽰省略符号来代表被修剪的⽂本。
string使⽤给定的字符串来代表被修剪的⽂本。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。