文本超长显示省略号，鼠标移上显示全部

1、本方案为纯CSS

关键css

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

原理就是利用text-overflow:ellipsis;属性实现，没有什么高深的属性：

 

以下的实例代码：

.icoFontlist:hover
{
    width: 225px;
    font-size: 12px;
    border: 0px solid #ddd;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    color:blue;
    text-decoration:underline;
    cursor:pointer; 
}
.icoFontlist{
    width: 225px;
    font-size: 12px;
    border: 0px solid #ddd;
    color:#5f5f5f;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

HTML代码片段：

<div class="icoFontlist" title="这里是全部的信息没有省略号，接下来演示如何处理超长文本显示省略号…" >这里是全部的信息没有省略号，接下来演示如何处理超长文本显示省略号</div>

 

最终完成效果：