css3 - text-overflow为何会在li的子标签a下失效
问题描述
<ul> <li><span>2014-05-28</span><a href='https://www.haobala.com/wenda/news.html'>这不是广告这不是广告这不是广告这不是广告这不是广告这不是广告这不是广告这不是广告这不是广告这不是广告这不是广告</a></li></ul>
设置的CSS如下
li{ overflow: hidden; white-space: nowrap; text-overflow:ellipsis; width: 747px;}
为什么给a设置同样的样式会失效,而li不会
问题解答
回答1:设置 a { display: inline-block; } 即可。
Text overflow can only happen on block or inline-block level elements, because the element needs to have a width in order to be overflow-ed. The overflow happens in the direction as determined by the direction property or related attributes. - via: https://css-tricks.com/almanac/properties/t/text-overflow/
回答2:在给a设置的时候,加上display: inline-block;
相关文章:
1. python相关问题求解决,有偿2. javascript - input输入框触发change事件后,外部元素会被选中3. python - 用__call__ 实现装饰器功能4. javascript - 把字符串日期转换成一般时间格式后,发现小于10的数字不会自动添加0在前面,如下5. javascript - 在sublime中如何给.vue文件注释?6. javascript - js判断一个数组是否重复7. python - 请问用cxfreeze打包的可执行程序能反编译出源码么?8. javascript - vue2.0中router.repalce跟router.push有什么区别,二者的应用场景是会有怎样的区别?9. javascript - 这种上传图片预览怎么做?10. javascript - prismplayer播放器全屏问题