css代码片段之：css文字截取

css文字截取代码片段：

.text-overflow{
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis; 
    text-overflow: ellipsis;/* IE/Safari */ 
    -ms-text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;/* Opera */ 
    -moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/ 
}

代码解释：

应用的元素必须是一个固定长度，只有又固定长度才有溢出产生。

white-space:设置如何处理元素内的空白

• normal：默认处理方式。
• pre： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
• nowrap： 强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
• pre-wrap： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
• pre-line： 保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

text-overflow:属性规定当文本溢出包含元素时发生的事情

• clip:直接裁剪文本（默认）
• ellipsis:用省略号代替裁剪的文本

文字溢出截取常常会在项目中应用，实现方式很多，除了可以通过css截取，也可以通过js，php等程序截取。

适用场景：

一般元素的长度相对固定，截取溢出长度部分的文字适用css截取

截取明确的字数适用程序截取（php，js）