web前端总结之文本超出显示省略号

当网页中显示文字过多时，会出现如下样式的文字：

文字显示为省略号，当鼠标移上去时显示文字。
这就是文本超出显示省略号。
主要用到了：
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脚本也可以！