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

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

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

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

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

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

整个操作过程如下:

发现并解决问题:

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

请教一位前辈的建议,测试下<a>标签替换<span>标签,并不能解决,后面大神建议试下把<span>标签样式修改成  display: inline (原来我是设定 display: inline-block), OK 问题解决

总结:

........应该是由于元素的 display 所引起的,上文提到了 仅删除文字并不会引起这个问题  ,把元素设置成 display: inline 处理成文字形式

应该是这样子吧。。待跟进。。。

也请各位前辈交流指点学习~

完成效果如下:

最新文章

  1. 【腾讯Bugly干货分享】微信热补丁Tinker的实践演进之路
  2. AngularJs之四
  3. 最新版CKEditor在线编辑器的配置方法
  4. PreparedStatement
  5. ASP.NET MVC 给ViewBag赋值Html格式字符串的显示问题总结
  6. Deformity PHP Webshell、Webshell Hidden Learning
  7. 虚拟研讨会:如何设计好的RESTful API?
  8. 浅谈Servlet(二)
  9. java HTTP请求 DefaultHttpClient is deprecated
  10. CentOS7搭建LAMP实战
  11. DAY18、常用模块
  12. spring web参数传递
  13. 1、 LwIP协议栈规范翻译——简介
  14. thinkphp标签实现bootsrtap轮播carousel实例
  15. SQL Server 对比数据库差异
  16. UITableVIew与UICollectionView带动画删除cell时崩溃的处理
  17. n=n+1 放在print(s)的上面的影响 (2) n=n=+1在前面,则不满足前面&lt;100条件时候,才跳出while的循环,这时候while循环结束, 到了外面的下一步--&gt;print()
  18. login.jsp
  19. 企业搜索引擎开发之连接器connector(二十六)
  20. python之json扩展

热门文章

  1. ubuntu上lamp环境搭建
  2. UVALive - 4329 Ping pong 树状数组
  3. HDU - 2112 HDU Today Dijkstra
  4. ZOJ - 2477 dfs [kuangbin带你飞]专题二
  5. 中小研发团队架构实践之微服务MSA
  6. SpringBoot idea maven打包war
  7. APP性能测试(启动时间)
  8. jVM笔记4-对象的结构
  9. 2015最全iOS开发自学视频资料(基础+实战)
  10. Caused by: java.lang.ClassNotFoundException: flex.messaging.io.BeanProxy