• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

内容溢出时如何出现省略号

开发技术 开发技术 6小时前 1次浏览

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

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


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

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


程序员灯塔
转载请注明原文链接:内容溢出时如何出现省略号
喜欢 (0)