flex布局里文字溢出显示...怎么做

ruby0602 2016-12-11 07:17:13

flex-wrap: nowrap;
text-overflow: ellipsis;不起作用

...全文

1296 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

leileizhao1993 2016-12-12

打赏
举报

回复

没有设置高度吧，如果设置高度了那就是有些浏览器不兼容这个属性了，比如火狐，IE，这样只能用JS模拟了，分两部分，左边显示内容，多余部分隐藏，右边显示省略号

cl18334797638 2016-12-12

打赏
举报

回复

设固定宽度，超出隐藏overflow:hidden

当作看不见 2016-12-11

打赏
举报

回复

用js手动模拟这个效果吧

不值一提的 flex-basis ，却给文本溢出添加省略号这个小小的功能带来很多了麻烦。下面来演示一下。 1. flex 家族 flex 里有很多的属性，我们经常用到的就是如下操作： .container { display: flex; } .container > .left { flex: 1; } .container > .right { flex: 1; } 这样可以很方便的实现一个左右等分的布局。我们来看一个引起问题的例子： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /

flex布局，文字溢出

flex布局导致文字溢出的解决方案

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...

css单行文字溢出省略： overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100px; css多行文字溢出省略： word-break: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overfl

61,126

社区成员

60,707

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章