当网页中显示文字过多时，会出现如下样式的文字： 文字显示为省略号，当鼠标移上去时显示文字。 这就是文本超出显示省略号。 主要用到了： text-overflow:ellipsis; overflow:hidden; white-space: nowrap; 在标签中添加title=“被省略的文字”，实现鼠标移动到省略号上显示被省略的文字。 效果如下图： 注意： 第一行的li中文字与第二行中的文字显示效果的对比。
一般都用在ul 的li中，实现文字的有序排列。显得整齐有序！ 后面代码讲解：css：
ul{ margin: 0; padding: 0; } li{ margin: 0; padding: 0; border: 1px solid #cc0000; list-style: none; width: 200px; overflow: hidden; height: 20px; font-size: 14px; line-height: 20px; color: #000; } .notext { } .notext i{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block; width: 100px; font-style: normal; } 1 给li设定宽度，使得排版整齐； 2 给li中的文字添加i标签。这是为了让li标签不被完全占满当然用padding也可以，但是推荐添加标签做。因为i标签的内容后面可能还有其他内容。 i标签的css属性： display:inline-block;//行内块，使得i标签可以设置宽高等，而且不会独自占一行； text-overflow: ellipsis;//设置文本、字内容超出部分显示省略号； overflow: hidden;//i标签中的内容超出部分隐藏。注意与text-overflow的区别； font-style：normal;//由于是i标签它本身的效果是让文字斜体，所以为了需要可以合理去掉这个效果。注意： 1 ul标签要有margin：0；padding：0；不然ul标签在li标签的外面会占用空间。 2 在一般固定了宽度的li和i标签时，既是当文字的空间固定了后，为了方便后续更换文字内容可以用php脚本一个replace（）函数替换，找到指定的位置进行替换。当然js脚本也可以！
