超出区域文字显示为省略号或者剪切效果——CSS的生僻操作

　　每门语言总有那么一些不太常用，却又不可或缺的语法操作。下面说一下，在HTML文件中，如何设置用 “省略号” 和 “剪切” 代替大量文字的效果。

 

以下是HTML的主体代码:

 

　　　　　　　　

　　首先，中文是默认行末自动换行的。而英文和数字，主流浏览器一般默认为空格处换行。上图，我们先编写2段字符。然后CSS代码见下图：

 

 　　　　　　　　  

　　见上图，设置div的大小使其装不下字符，然后对字符设置不断行。这样文字会超出div显示，然后overflow：hidden；让超出部分隐藏不显示，

然后 text-overflow：ellipsis；或者 text-overflow：clip；分别设置隐藏部分用 省略号或剪切效果显示。