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

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

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

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

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

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

例如：
html：

<span class="overNone">{{scope.row.hotelName}}</span>

css：

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

效果图：

---

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

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

<span class="overNone"  :title="scope.row.hotelName">{{scope.row.hotelName}}</span>