关于不换行显省略号(这是 IE bug 还是我的 css 写错了?)

2014-11-13 23:54:27 +08:00
 kmvan

先上地址: http://jsfiddle.net/8r6eooy9/1/

补图 http://ww2.sinaimg.cn/large/686ee05djw1em9t7dfzc9j209s04t74h.jpg

情况说明:ul>li>a 结构中,显示 ullist-type-style(圆点),并且 a 填充整行,但不换行,溢出的显示 […] 省略号。

预期效果:圆点a 应该在同一行。

实际情况:在 IE11(或安卓444自带浏览器)下,圆点成为了第一行,a 被挤下去了。ffchrome 无此问题。

猜测原因:不知道。

请大神们看看这是什么情况?理论上 css 应该没错,但 ie11 出现了换行情况,求支招~

4105 次点击
所在节点    CSS
2 条回复
anjianshi
2014-11-14 08:02:48 +08:00
是 overflow: hidden; 这句导致的问题,原因不明

这有一个勉强可用的实现方式:
ul{ }
li{
list-style-position: inside;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 15em;
}
a{ }

缺点是, IE 和 Chrome 下,显示出来的字数是不一样的
但至少可以正常截断字符了
thanksmymagic
2014-12-05 12:54:07 +08:00
@anjianshi Hi~你好,我是笪兴,十年后(10years.me)的创始人。我刚刚看到你的一些回答,感觉和我们的技术和团队风格都挺合拍 ,希望可以聊聊。十年后是一个基于梦想的社交网络,我们想用它让年轻人的生活更有未来性,网站是去年年末上线的。我们上个月刚拿到创新谷VC百万元天使轮融资,现在在招募Web前端开发的人才。可以加我的微信18101620531聊聊,交个朋友也不错:)

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/146341

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX