关于display:flex碰上white-space nowrap 影响布局的问题

最新推荐文章于 2023-05-31 15:19:21 发布
最新推荐文章于 2023-05-31 15:19:21 发布
阅读量168 收藏
点赞数
文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39325301/article/details/120785540
版权

写电商菜单折行问题
解决办法，父div设置min-width:0即可

flex: 1;
min-width: 0;

w3c上面是这样说的

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element).

因为设置了white-space:nowrap，所以content没法收缩了，设置0后就有了固定尺寸就可以收缩了

东暖夏凉1234
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css white-space:nowrap属性用法（可以强制文字不换行输出）
10-26
css强制文字不换行，可给指定的容器增加white-space:nowrap即，下面把CSS示例写给大家,很简单
CSS小记。
冰谷悠
01-16 202
①使用flex布局white-space失效的问题：在white-space的元素下添加min-width:0; ②使用fixed定位让flex布局失效的解决方法：在flex布局外添加一个有宽度的盒子，让该父盒子定位。
‘display: flex;’布局下使用‘white-space: nowrap;’导致的问题
Honiler的博客
07-22 5324
需求： 在item中实现布局预期效果为：左侧一个正圆形的用户头像，右侧的上方为该用户昵称、下方为个性签名（单行显示，超出实际能显示的最大宽度则用‘...’代替）。如图： 代码： wxml布局: <view class="member-item"> <image class="avatar" src=""></image&gt...
弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
tianyaluqingchen的博客
04-11 1946
文字长度过长显示省略号的样式设置方法众所周知： .css { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 然而在弹性盒子模型中发现在添加white-space: nowrap;属性后，宽度自适应部分失效了，导致过长的文本撑开了布局，进而布局撑出了屏幕外。虽然省略号显示了，但是父元素的自适应宽度完全失效了。 经过搜索排查分析，发现是display: flex;影响的white-space: now
flex布局遇到white-space:nowrap怎么超出一行显示省略号
大唐锦绣的博客
10-28 1539
一、场景： 二、简化场景： 三、页面布局： <ul class="g-list"> <li class="g-list-item"> <div class="item-content-wrap"> <div class="item-title"> 英短贯彻爱与真实的邪恶，可爱又迷人的反派角色！</div> </div> </li> </ul> 四、
flex布局和white-space: nowrap； 冲突解决
yqdid的博客
05-31 989
虽然可以通过设置max-width或者min-width来限制元素的宽度，但我们的设备宽度是不固定的，所以设置一个固定的区间并没有用，我们需要的是这个元素它能在自适应的情况的下文本溢出依旧有效。flex: 1 表示：flex: 1 1 0%（第三个值flex-basis会默认添加单位）flex 布局下，想要设置文字不换行，并且超出部分省略号显示的效果。使用flex-basis：width失效，前者优先级高（MDN）一般来说应该解决了，但是 ，我设置了还是不起作用。给设置flex的元素设置。
white-space:nowrap的应用
01-19
在web2.0的概念中，标签是个时常出现的东东，可是在设计时中文不象英文那样在表现标签云时表现的那么好，主要是中文词组的成为标签后，有时会出现长标签在标签云中被断行的问题。 今天发现有人在问这个问题，以前...
css文本换行属性word-wrap和white-space使用总结
01-19
今天碰到了td文字内容不换行，发现是：white-space: nowrap，即强制文本不进行换行，顺便看了一下文本换行的属性word-wrap，总结如下： white-space的默认只是normal，自动换行。 word-break:break-all和word-wrap:...
详解微信小程序之scroll-view的flex布局问题
12-08
关于微信小程序的scroll-view组件，第一次写的时候是直接在scroll-view中用了一层容器包裹子元素，然后用了flex布局，并且是用了组件来实现的横向滚动，后面有提出改进，但是不记录下，就发现过了几天，就有点懵了 ...
微信小程序组件scroll-view
weixin_30498807的博客
03-16 154
视图容器scroll-view :官方文档 Demo Code var order = ['red', 'yellow', 'blue', 'green', 'red'] Page({ data: { toView: 'red', scrollTop: 100 }, upper: function(e) { console....
关于white-space:nowrap；影响flex布局问题
psh305的博客
05-07 440
查询MDN得知：在其他普通布局中，元素的min-width默认值为0，再flex弹性布局中，min-width默认值为0；而当元素设置white-space：nowrap，该元素宽度被撑开。翻译：默认情况下，flex项不会缩小到其最小内容大小（最长单词或固定大小元素的长度）以下。因此，上面例子中右侧元素被撑开，左侧固定宽高元素被挤压。前端开发中经常遇到两列布局，其中左侧固定，右侧自适应。给自适应元素加上css: min-width: 0;效果如下：与我们预期有些出入。
CSS：关于display:flex与white-space: nowrap的问题
mosowe
11-27 3219
问题再现： 目前做一个列表页，具体结构如下： html： &lt;div class="listItem"&gt; &lt;div class="pic"&gt;&lt;img src=""&gt; &lt;/div&gt; &lt;div class="info"&gt;
关于 white-space: nowrap； 影响 display: flex； 布局的问题
wolffy_911的博客
03-27 2249
关于 white-space: nowrap; 影响 display: flex; 布局的问题
flex布局右列固定左列自适应，遇到white-space nowrap 影响布局超长的问题
逆水行舟，不进则退
01-27 1250
关于display:flex碰上white-space nowrap 影响布局的问题 缘由：想用flex实现，右边固定，左边文字自适应，并自动换行。 问题：文字撑满不换行 布局效果如下图： 代码如下： html <div class="row flex"> <div class="col-l"> 服务单号 </div> <div class="col-r flex justify-c-between"> <div class
记：flex布局遇到white-space:nowrap失效的问题
南乔几经秋、的博客
08-30 4888
在写界面时遇到一个问题：在flex布局中想实现文字超出隐藏并显示省略号，结果使用white-space:nowrap后，flex布局失效了.... 想实现的效果： 结果： 解决办法： 给包含文字元素的父元素设置min-width: 0 总结： white-space:nowrap会影响flex布局下未设定宽度的元素，而只要对元素的宽度有一个下限设定就可以解决这个问题，不管是最小...
土旦：关于display:flex碰上white-space nowrap 影响布局的问题
weixin_30662109的博客
03-18 225
背景，做一个前面图片宽度固定，后面宽度自适应，使用到了flex布局，但是想让后面div里文字不换行，超出以点点表示时，这时布局就乱了，查了下，原来flex布局与white-space:nowrap有影响 解决办法，父div设置min-width:0即可 flex: 1; min-width: 0; w3c上面是这样说的 By default, fl...
flex布局遇到white-space失效问题
Mortimer's Blogs
07-09 4718
        昨天在用vue做移动端单页面时，遇到一个问题，给子标签加上flex等于1，尝试多次无效，发现把white-space属性去掉，就能正常实现等宽自适应布局。        初步定位问题为，white-space对flex弹性布局有影响。在网上找了一系列的资料，找到一个解决办法，给使用了white-space的子标签添加一个属性min-width: 0，可以解决问题。HTML--伪代码...
关于display:flex碰上white-space:nowrap的问题
xiaomajia029的博客
07-09 1069
当 display:flex 碰上 white-space nowrap 的时候，会打乱 flex 布局。解决方法：给 flex 布局级设置最小宽度为 0。 示例 当 display:flex 碰上 white-space nowrap，flex布局被打乱了，示例中表现为内部元素超出父元素范围（可能存在其他情况）。 [外链图片转存失败(img-8LARnioy-1562636390940)(e...
display: flex; flex-wrap: wrap; align-items: center; white-space: nowrap;
最新发布
06-13
这是CSS中的一些属性，用于控制元素的布局和排列方式。 - `display: flex`: 将元素的容器设置为弹性布局。 - `flex-wrap: wrap`: 当元素的宽度超过容器宽度时，将元素自动换行。 - `align-items: center`: 将元素在交叉轴上居中对齐。 - `white-space: nowrap`: 当元素内部有文本内容时，将文本内容强制不换行，保持在同一行内显示。 这些属性可以用于实现响应式布局和适应不同屏幕大小的场景。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值