使用text-overflow: ellipsis 处理文本溢的一个小问题

今天在做一个自定义 select多选 搜索的时候,有这样子的一个需求:

1.点击自定义的一个 选项内容框,下拉可多选项

2.多选项不允许换行,且父溢出拆剪,(单行)溢出部分使用 "..."替换

3.动态添加移除多选项内容展现在选项内容框

 

感觉一个常见的 select 自定义优化,使用过程中碰到了一个怪异的问题:

动态添加/移除 选项元素(dom元素)时,假如首先移除第一个选项(元素),则其他内容被裁剪了(元素始终存在,但是被裁剪一样,看不见,font-size、color并无影响),仅显示最后一位元素。

整个操作过程如下:

使用text-overflow: ellipsis 处理文本溢的一个小问题

 

发现并解决问题:

text-overflow: ellipsis 如果用在单个节点里面倒是没遇到过这个问题
我把前面的文字删掉  后面的文字仍然会自动往前排 且省略号的位置是对的(就是展示的字数是正确的) 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyzdjd.html