文件名字符串过长，显示省略号，鼠标划过悬浮内容

最新推荐文章于 2023-03-30 16:59:02 发布

weixin_33826268

最新推荐文章于 2023-03-30 16:59:02 发布

阅读量1k

点赞数 2

文章标签：前端 javascript ViewUI

原文链接：https://my.oschina.net/lccchn/blog/1162770

版权

为什么80%的码农都做不了架构师？>>>

1.文件名字符串过长，显示省略号

（1）用css方法

使用css属性使溢出功能显示省略号

<style>
/* 隐藏溢出内容*/
overflow:hidden;
/* 设置宽度为多少时显示省略号*/
width:10%;
text-overflow:ellipsis;
/* 不可换行功能 */
white-space:nowrap;
/* 表格中宽度百分比宽度不管事，需要依情况选择该属性 */
position:absolute;
/* span标签里不好用，需要用该属性改为块级属性 */
display:inline-block;
</style>

（2）用angularjs方法

angular.module('ng').filter('cut', function () {
 return function (value, wordwise, max, tail) {
 if (!value) return '';
 max = parseInt(max, 10);
 if (!max) return value;
 if (value.length <= max) return value;
 value = value.substr(0, max);
 if (wordwise) {
 var lastspace = value.lastIndexOf(' ');
 if (lastspace!= -1) {
 value = value.substr(0, lastspace);
 }
 }
 return value + (tail || ' …');
 };
 });

这个方法是从网上借鉴的，网址：https://ask.helplib.com/488192

经证实是可以使用的

然后在html中使用{{ss | cut:true:20: '...'}} 就可以了。

2.鼠标划过悬浮内容

用title=“想显示的内容”

<span ng-show="state.folderish=='1'" ng-click="changebreadcrumb(state.local_path)" class="font_base2" title="{{state.name}}" style="padding-top:3.5px;padding-left:7px;position:absolute;display:inline-block;overflow:hidden;width:10%;text-overflow:ellipsis;white-space:nowrap">{{state.name}}</span>

有问题欢迎提问，互相学习。

转载于:https://my.oschina.net/lccchn/blog/1162770