react——Antdesign 使用checkableTag标签实现标签多选功能

具体实现功能参考标签多选功能，比较简单。

这篇文主要记录一下我在开发这部分时遇到的一个现象。
当时需求是超过标签的宽度省略文本内容并显示省略号，我十分自然的使用css来实现。就是当你给checkableTag添加样式的时候，

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

测试的时候发现在window上是没有问题的，一切都很完美。但是在Mac上发现标签竟然会跑！！！！鼠标移上去标签就开始移动，鼠标都跟不上的那种，别提点击它了。

后来经过排查发现是text-overflow:ellipsis;这行代码产生的问题。于是采用了js的方法进行代替

{tag.brandName.length>8?tag.brandName.slice(0,8)+'...':tag.brandName}

当字符串的长度大于8时，截取前7个字符串并添加省略号，如果不大于8则正常显示。

至于发生这种问题的原因还在思考中，希望如果大家知道可以评论我哈，非常感谢。