js实现字数超出宽度自动显示省略号？

JavaScript023

js实现字数超出宽度自动显示省略号？,第1张

1、用js实现这样的功能纯粹就是浪费性能，不划算，最好用css来实现；

2、用css设置超出省略非常简单

.text{

width: 300px

overflow: hidden

white-space: nowrap

text-overflow: ellipsis

}

3、如果你实在想用js来实现这样的效果，那么，有两种方法：

先获取dom的宽度，判断宽度是不是大于预设的宽度，如果大于，就删掉最后的几个字，然后继续判断；

获取dom的宽度，如果宽度大于预设值，就用js改变dom的css样式。

好问题.....但是....

css不更好吗？

就目前而言，js实现几率为0....当然你愿意去做是可以的，用width/一个字符的宽度，然后得到的商是这个element的最大字符数量，但是现在的字符有些不等宽，会造成溢出或不够。。。

文本溢出

有些时候，文本会超出一个元素，这通常称为文本溢出，我们使用text-overflow来进行文本溢出的操作，如下：

text-overflow:[ clip | ellipsis | <string>]{1,2}

clip 这个关键字的意思是"在内容区域的极限处截断文本"，因此在字符的中间可能会发生截断驾为了能在两

个字符过渡处截断，你必须使用一个空字符串值 ('')此为默认值驾

ellipsis 这个关键字的意思是☆用一个省略号 ('□', U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本★驾这个

省略号被添加在内容区域中，因此会减少显示的文本驾如果空间太小到连省略号都容纳不下，那么这个省

略号也会被截断驾

<string> <string>用来表示被截断的文本驾字符串内容将被添加在内容区域中，所以会减少显示出的文本驾如果空

间太小到连省略号都容纳不下，那么这个字符串也会被截断驾

<FULL_PAGE_VALUE> 全局值 inherit | initial | unset

纯手打，求采纳o(^▽^)o