一般情况下对文章列表的调用,通常使用ul循环li标签。受页面模块宽度的的限制,一般需要对li进行文本内容溢出隐藏处理,实现更加合理的排版。经过测试在li标签中使用text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
组合属性后,多数浏览器可以正常渲染。仅仅在Chrome下面无效。
尝试通过对li追加display:inline-block;或者display:block;变成块级元素后,li标签的list-sytle属性又失效了,成了一种顾此失彼的状态。
通过对li转成块级元素后,原list-style属性通过html页面插入圆点图标或者圆点字符来实现。另或通过输出行号12345这种自定义样式来达到目的。
雅兮网同学给了一个曲线救国的办法。通过对li标签内的a标签追加display:inline-block;
属性。并设定一个宽度width或者最小宽度min-width,将组合属性text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
放入a标签。从而实现文本溢出自动隐藏。Chrome下还需要补充vertical-align: top;
或者vertical-align: middle;
来达到li标签和a标签在同一行内问题。根据现实效果需要,还可能需要对li定义行高问题。