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>