应用场景：分类部分有很多子类，点击“分类”时，有选中状态，选中效果如下：
由于内容分类名称可能会很长，就需要进行…展示，
模拟页面大致排版，
效果图如下：
可以看到上图中当分类名称太长时，会导致内容截断，选中的效果图也会有截断的情况，不是很美观
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style scoped>* {margin: 0;padding: 0;}.classify {display: flex;border: 1px solid #999;}.title {width: 100px;height: 80px;border-right: 1px solid #999;text-align: center;line-height: 80px;flex-shrink: 0;}.content {display: flex;flex-wrap: wrap;padding: 0 6px;box-sizing: border-box;}.content div {width: 160px;height: 40px;line-height: 40px;text-align: center;overflow: hidden;text-overflow: ellipsis;}.content div span.active {color: #fff;border: 1px solid #fdb13e;background: #f895008f;border-radius: 4px;padding: 0 6px;overflow: hidden;text-overflow: ellipsis;}</style></head><body><div class="classify"><div class="title">分类</div><div class="content"><div><span class="active">传感器，变送器</span></span></div><div><span>传感器，变送器</span></span></div><div><span>光学检测设备</span></span></div><div><span>分立半导体产品</span></span></div><div><span>电容器</span></span></div><div><span>电阻器</span></span></div><div><span>线路保护，配电，后端线子</span></span></div><div><span>继电器</span></span></div><div><span>连接器，互连器件</span></span></div><div><span>集成电路（IC）</span></span></div><div><span>音频产品</span></span></div><div><span>其他</span></span></div><div><span class="active">嵌入式手机电视机嵌入式标签机</span></span></div><div><span class="active">STMicroelectronics</span></span></div></body></html>
为了能够让选中的分类标签能够边框显示完整，则需要对分类标签进行处理：
考虑到的解决方法就是：
通过判断分类名称字符串的字符长度，如果长度超过一定数值(比如18个字节)，则需要自动截取前18个字节并加上…展示
要实现上面的效果，则需要注意以下几点：
1.汉字和英文字母占据的空间不一样
汉字占2个字节，英文字母占1个字节，不能一概而论的将18认为汉字或者英文字母，应该是18个字节：
2.当字符串的字节长度超过一定数值时，需要截取
判断字符串字节长度的方法
String.prototype.gblen = function () {var len = 0;for (var i = 0; i < this.length; i++) {if (this.charCodeAt(i) > 127 || this.charCodeAt(i) == 94) {len += 2;} else {len++;}}return len;};
<span v-if="brandName.gblen()>18">{{brandName | filterStr}}</span><span v-else>{{brandName}}</span>
截取字符串的过滤方法（vue版本）
filterStr(str) {var realLength = 0, len = str.length, charCode = -1,subNum=0;for (var i = 0; i < len; i++) {charCode = str.charCodeAt(i);if (charCode >= 0 && charCode <= 128) realLength += 1;else realLength += 2;if (realLength > 18) {return str.substring(0, i)+"...";}}}
感悟：
其实两部分可以整合在一起，直接用后面的过滤方法即可：修改过滤方法如下：
filterStr(str) {var realLength = 0, len = str.length, charCode = -1,subNum=0;for (var i = 0; i < len; i++) {charCode = str.charCodeAt(i);if (charCode >= 0 && charCode <= 128) realLength += 1;else realLength += 2;//如果字符串的字节长度超过限制，则返回截取后的字符串if (realLength > 18) {return str.substring(0, i)+"...";}}//如果进行到这一步，则表示字符串长度没有超过限制，则直接将字符串返回return str;}
附录：
字符串获取字节长度的几种方法：/testcs_dn/article/details/21412303
