文章目录

span内容溢出显示省略号，鼠标悬浮可显示完整span内容

在做前端网页的时候，时常需要在规定的内容区显示内容，有时候内容长度过长而内容区长度不够时导致内容溢出，我们为了更好的视觉感受是会将溢出部分的内容显示为...。

如何将溢出的内容显示为省略号：

只需要给其添加以下css样式即可：

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

例如：
html：

{{scope.row.hotelName}}
 

css：

.overNone{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} //溢出省略号
 

效果图：

如何实现鼠标悬浮显示溢出的内容：

这个只需要给sapn加一个:title即可：

{{scope.row.hotelName}}