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>
最终完成效果: