html鼠标放上面显示省略内容,文本超长显示省略号，鼠标移上显示全部

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代码片段：

这里是全部的信息没有省略号，接下来演示如何处理超长文本显示省略号

最终完成效果：