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

web前端总结之文本超出显示省略号
当网页中显示文字过多时，会出现如下样式的文字

文字显示为省略号，当鼠标移上去时显示文字。 
这就是文本超出显示省略号。 
主要用到了： 
text-overflow:ellipsis; 
overflow:hidden; 
white-space: nowrap; 
在标签中添加title=“被省略的文字”，实现鼠标移动到省略号上显示被省略的文字。 

效果：

一般都用在ul 的li中，实现文字的有序排列。显得整齐有序！
后面代码讲解：

<div class="notext">
                 <i class="name_sty" :title="item.file.name"> {{item.file.name}}</i>
                  <i  class=" file_del" @click="fileDel(index)">删除</i>
</div>

注：在vue中title应 这么写

 <i class="name_sty" :title="item.file.name"> {{item.file.name}}</i>

css :

.name_sty {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    width: 200px;   
    cursor: pointer;
}

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标签它本身的效果是让文字斜体，所以为了需要可以合理去掉这个效果。