flex遭遇text-overflow:hidden，white-space:nowrap

最新推荐文章于 2024-05-10 10:16:57 发布
最新推荐文章于 2024-05-10 10:16:57 发布
阅读量178 收藏
点赞数
原文链接：http://www.cnblogs.com/hinong/p/5626774.html
版权

最近在项目中遇到使用flex的时候，在flex-item元素中使用text-overflow:hidden；white-space:nowrap；进行省略文字的操作。

发现flex-item失控了，长度完全根据子元素中的文字决定，把其他同级元素挤跑。

最后求助网友，得到解决办法：

1.给flex-item元素增加min-width:0

转载于:https://www.cnblogs.com/hinong/p/5626774.html

weixin_33877885
关注
css white-space:nowrap属性用法（可以强制文字不换行输出）
10-26
在实际应用中，`white-space: nowrap`常与`display: inline-block`或`display: flex`结合使用，以实现自适应的布局效果。例如，创建一个横向排列的项目列表，即使项目名称很长也不会导致换行： ```css .list-item {...
Flex布局下如何使用text-overflow:ellipsis省略过长文本
Hello博客
01-30 4002
问题 试想一下我们如何通过Flex布局实现下面这个组件呢？ 中间显示的文字内容过长是可以自动省略 Flex布局实现方法一(推荐) HTML： <div class="container"> <div class="field"> <div class="title">文本输入</div> <div cl...
flex布局导致文字溢出
weixin_51445423的博客
05-14 1057
flex布局导致文字溢出的解决方案
flex布局中的文本溢出（text-overflow：ellipsis）问题
小新的博客
10-31 3269
根据flex布局的规则，只有主轴方向上overflow为visible的item上其min-width和min-height 才会被设置为auto，否则min-size属性将会设置为0。所以我们需要注意这点，flex item在主轴方向上不会比他的内容尺寸还小，这是因为浏览器是根据内容的宽度来计算默认的min-width或者min-height的。使用flex布局的时候经常需要使用文本溢出，但有时候会发现文本溢出并没有效果，百度也没有明确的答案，谷歌了下，找到了一篇解释的不错的文章。
flex多层布局导致子元素overflow: hidden，text-overflow: ellipsis属性失效
LiuXiaodong2020的博客
01-30 902
overflow: hidden，text-overflow: ellipsis在flex多级失效
flex 弹性盒子和overflow：hidden的注意事项
wmeng13的博客
12-07 4916
弹性盒子与overflow：hidden 不能同时使用，同时使用的话overflow：hidden不生效
.page { display: flex; flex-direction: column; align-items: flex-start; width: 375px; height: 812px; background-color: #000000; font-family: Roboto-Regular; white-space: nowrap; } .view { position: relative; display: flex; flex-direction: column; align-items: flex-start; margin-top: 100px; margin-left: 52px; } .caption { position: relative; overflow: hidden; height: 45px; max-width: 192px; font-family: Roboto-Bold; font-size: 32px; line-height: 45px; color: #ffffff; text-overflow: ellipsis; } .title { position: relative; margin-top: 4px; font-size: 32px; line-height: 38px; color: #c3c3c3; } .item-wrapper { position: relative; display: flex; justify-content: center; align-items: flex-start; margin-top: 69px; margin-left: 33px; white-space: normal; } .item { width: 294px; height: 287px; } .book-wrapper { position: relative; display: flex; align-items: center; align-self: flex-end; height: 49px; padding-left: 20px; padding-right: 20px; margin-top: 128px; margin-right: 50px; line-height: 20px; border-radius: 10px; box-sizing: border-box; border-width: 1px; border-style: solid; border-color: rgba(196, 196, 196, 1); } .book { font-size: 20px; color: #ffffff; } button{ background-color:transparent; border-style:none; }幫我加入自适应网頁手機
07-23
white-space: nowrap; } .view { /* 桌面样式 */ position: relative; display: flex; flex-direction: column; align-items: flex-start; margin-top: 100px; margin-left: 52px; } .caption { /* 桌面...
display: flex; flex-direction: column; overflow: hidden; 添加一下注释
11-23
/* 处理因white-space: nowrap 导致宽度失效的问题 */ .content { /* 子元素 */ /* display: flex; 这里需要注释掉 */ box-sizing: border-box; font-size: $text_size_24; color: $color_text_primary; ...
.newslist{ figure{padding: 20px 0;border-bottom: 1px #eee solid; figcaption{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } img{ width: 100%; } ul{display: flex;justify-content: space-between; li{line-height: 30px; &:nth-of-type(1){ color: #aaa; } &:nth-of-type(2){ a{text-decoration: none;} } } } } }是什么
06-09
这是一个 CSS 选择器，表示选中所有 class 名为 `.newslist` 的元素及其子孙元素中的 `figure`、`figcaption`、`img` 和 `ul` 元素，然后对它们进行样式设置。 具体的样式设置如下： - `figure` 元素设置了上下 20...
text-overflow: ellipsis加display flex失效
07-27
white-space: nowrap; text-overflow: ellipsis; } <div class="flex-container"> <div class="text-ellipsis"> 这是一段可能会超出容器宽度的文本内容 ``` 通过将文本所在的元素设置为 `display: block`...
‘display: flex;’布局下使用‘white-space: nowrap;’导致的问题
Honiler的博客
07-22 5378
需求： 在item中实现布局预期效果为：左侧一个正圆形的用户头像，右侧的上方为该用户昵称、下方为个性签名（单行显示，超出实际能显示的最大宽度则用‘...’代替）。如图： 代码： wxml布局: <view class="member-item"> <image class="avatar" src=""></image&gt...
CSS 浅探flex布局中使用的overflow ，及width/height=0
japlus的博客
11-27 9594
w3school定义是： overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 对于overflow:auto的初级理解是，设置父元素height/width，若子元素溢出，则自动显示纵向/横向滚动条。 .........
flex布局下overflow失效问题
热门推荐
颤抖的羽翼
04-10 1万+
场景描述：上图场景中，需求是 职位名称  与  薪资 保持在同一行，无论薪资多长总能保持正常显示，当职位名称过长时超出部分显示  "..." 省略符，如和实现过程中发现使用flex布局时，薪资部分不设置宽度，自适应，左侧职位名称部分设置flex: 1;使用overflow: hidden时失效解决办法：左侧职位名称部分设置如下flex: 1; width: 0;...
Flex布局下文本溢出省略号失效了，Flex自适应宽度显示省略号
最新发布
smouns_的博客
05-10 1520
Flex布局下文本溢出省略号失效了，Flex自适应宽度显示省略号
flex垂直方向布局与overflow结合使用
pscool的博客
04-29 2258
【代码】flex垂直方向布局与overflow。
html、css单行、多行文本溢出隐藏
嘿喵财运旺旺
09-26 745
单行： div{/* 单行溢出隐藏 */ width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 多行： div{/* 多行溢出隐藏 */ width: 150px;...
针对flex布局下文字溢出的解决方法
weixin_67321774的博客
09-30 3211
flex布局，文字溢出
text-overflow 的使用
猫子猪的博客
06-28 3323
text-overflow 是一个很常用的 CSS 属性，该属性设置截断的文本溢出内容如何显示。 属性值 clip（默认值） 在内容区域的极限处截断文本。因此在字符的中间可能会发生截断。 ellipsis 用一个省略号 ('…') 来表示被截断的文本。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。 生效条件 ...
overflow:hidden真的失效了吗
voice的前端旅程
01-04 1251
项目中常常有同学遇到这样的问题，现象是给元素设置了overflow:hidden，但超出容器的部分并没有被隐藏，难道是设置的hidden失效了吗？ 其实看似不合理的现象背后都会有其合理的解释。 我们知道，overflow属性值有这几种： visible：声明内容不会被剪裁。比如内容可能被渲染到容器外面。 hidden：声明内容将被剪裁，并且也甭想使用滚动条来查看剪裁掉的内容。 scr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值