flex 布局，省略号失效

flex 布局下，css 设置文本不换行时，省略号不显示的解决办法

问题：

main 容器是 flex 布局，左边一个 logo 固定宽高，右边 content 动态宽度。

.notice 非常长，一些设备下需要隐藏显示，即不换行，并留下省略符 ... 作标记。

发现 text-overflow: ellipsis 不生效，省略符根本没有出现。

// CSS
.main {display: flex;
}
.logo {width: 100px;height: 100px;margin: 10px;
}
.content {flex: 1;
}
.content > * {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
// HTML
<div class="main"><img alt="" class="logo" src="pic.jpg"><div class="content"><h4 class="name">a name</h4><p class="info">a info</p><p class="notice">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
</div>

尝试取消父元素 .content 的 flex: 1 ，无效。

尝试取消 .main 容器的 display: flex ，省略号出现。

因此猜测是 flex 布局的问题，进一步猜测省略符需要对父元素限定宽度。

尝试对父元素 .content 设置 width: 100% 无效，设置 width: 0 可行。即：

.content { flex: 1; width: 0; }

如果不设置宽度， .content 可以被子节点无限撑开；因此 .notice 总有足够的宽度在一行内显示所有文本，也就不能触发截断省略的效果。

测试还有一种方法可以达到效果：给 .content 设置 overflow: hidden 。

以下方法无效：

给 html, body 设置 max-width ，元素似乎能强行撑开页宽；
给 body 设置 overflow ，页宽不能被撑开了，但元素宽度还在，即元素本身还是溢出；
给 html, body 同时设置 max-width 和 overflow ，页宽限定在 max-width 内，元素本身还是溢出；
给 .main 容器设置 overflow: hidden ，同理 .main 是不溢出了， .notice 本身还是溢出；
给 .notice 元素设置 width或max-width ，虽然宽度受限，但在特定宽度下省略符 ... 显示不全，有时只显示两个点 ..

以上仅在 chrome 58.0.3029.81 下测试，系统为 Ubuntu 16.04.2 LTS 。

flex 布局，省略号失效相关推荐

Flex布局 text-align 失效的问题
前提是一个DIV,flex属性,然后里面是text节点经测试,text-align 不是失效了,只是在文本有一行的时候失效了,所以要在flex的div实现text-align,要多写一点,就当是兼容 ...
使用flex 布局的盒子使用 swiper轮播插件，flex布局会失效的解决方法
如上图代码所示:本来reward-list是一个弹性布局容器,子元素reward是弹性布局的.但嵌入swiper之后,reward的直接子元素就不再是reward. . 我们看下实际上的html结构: ...
css不换行省略号没作用,flex布局下，css设置文本不换行时，省略号不显示的解决办法...
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. a name a info Lorem ipsum dolor sit amet, co ...
2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
display:flex布局下white-space:nowrap失效问题解决
文字长度过长显示省略号的样式设置方法众所周知: h3 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } 然而有一次,我在 ...
弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
文字长度过长显示省略号的样式设置方法众所周知:  .css {white-space: nowrap;overflow: hidden;text-overf ...
记：flex布局遇到white-space:nowrap失效的问题
在写界面时遇到一个问题:在flex布局中想实现文字超出隐藏并显示省略号,结果使用white-space:nowrap后,flex布局失效了.... 想实现的效果: 结果: 解决办法: 给包含文字元素的 ...
css3 flex 省略号,142.关于flex布局与省略号不显示的问题
关于flex布局下,css省略号不显示的问题主要有两种场景场景一.直接在flex布局的元素里 html 我们日常工作中,接触到的主要 API,几乎都是由今天所讲解的这些对象提供的.理解这些对象的性质 ...
flex布局下文字超出省略号代替不起作用解决方法
项目中发现,在flex布局下,希望目标元素文字超出省略号时,text-overflow: ellipsis属性无效,结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0.over ...

flex 布局，省略号失效

flex 布局，省略号失效相关推荐

最新文章

热门文章