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

ruby0602 2016-12-11 07:17:13

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

...全文

1287 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布局 1.设置html，body高度为100% 2.设置最外层div的布局方式为弹性布局display:flex; 3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向，起点在上沿 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 colum

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...

61,129

社区成员

60,711

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章