HTML flex遇到white-space:nowrap

最新推荐文章于 2024-04-29 16:33:32 发布
最新推荐文章于 2024-04-29 16:33:32 发布
阅读量321 收藏
点赞数 2
文章标签： flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010108836/article/details/103839921
版权

问题描述

  • 假设一个flex布局的div，含有AB两个div。
    529800-20200104114032949-1216401613.png
  • 如果A里面有white-space:nowrap属性，则会撑开A宽度，导致B显示被压缩
    529800-20200104114501218-2095868504.png

原因分析

  • AB没有初始宽度，且A含有超长元素，所以flex会给A大比例的宽度

解决方法

  • AB均设置 min-width: 0;

处理结果

  • AB宽度比例显示正常
    529800-20200104114939674-312562649.png
Kevin·Tseng
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html whitespace属性,css white-space属性详解
weixin_30536391的博客
06-07 1976
white-space属性表white-space属性源码空格源码换行换行容器边界换行normal合并忽略换行换行nowrap合并忽略换行不换行pre保留换行换行不换行pre-wrap保留换行换行换行pre-line合并换行换行换行css white-space这个css样式，用来设置element元素对内容中的空格的处理方式，有着几个可选值：normal,nowrap,pre,pre-wrap,...
flex 遇到white-space:nowrap
09-05 127
背景，做一个前面图片宽度固定，后面宽度自适应，使用到了flex布局，但是想让后面div里文字不换行，超出以点点表示时，这时布局就乱了，查了下，原来flex布局与white-space:nowrap有影响 解决办法，父div设置min-width:0即可 <div style="width:100%;display:flex;height:80px"><div ...
html table space,html – white-space：nowrap中断显示：table
weixin_36212334的博客
06-11 332
我快要疯了.我使用搜索和谷歌,但无法想出一个解决方案,它将无法正常工作:(我有一个div嵌套在其他div中自动垂直居中和背景.最初它垂直适合几个图像并动态调整大小.我根据图片的数量(宽度,填充)使用几种CSS样式.但对于这个画廊我需要很多图片,原始布局分成几行,但我想要一个嵌套的“white-space：nowrap”with overflow-x：auto;在我的div.所以我可以滚动它们,但是...
white-space: nowrap 这个样式的作用
最新发布
Keep trying, keep going
04-29 809
是CSS中的一个属性值，它的作用是阻止元素中的文本换行，即使在HTML源代码中存在换行或空格也会被浏览器忽略。所有的文本都将在一行中显示，直到遇到。参考官网：https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space。如果文本长度超过了元素的宽度，也不会自动换行，而是会超出元素的边界继续显示。时，浏览器会自动换行，合并连续的空格和换行符（例如多个空格会被视为一个空格）。即 相比normal，只是多了不换行。
white-space: nowrap；导致宽度溢出
mengmengdemeng的博客
01-06 1368
我希望的效果 实际效果 <li class="title clearfix"> <i class="iconfont icon-right fl"></i> <a class="a ellipsis fl" href="/jinritoutiao/20220106/252039.html" title="郑州三公中医院怎么样？服务很贴心 认真负责">郑州三公中医院怎么样？服务很贴心 认真负责</a> <span class="
white-space:nowrap详解white-space的用法
galaxyJING的博客
01-25 1796
特别是标题列表，我们想一行只显示一条标题内容，而有时宽度有限标题文字多了width(宽度)又有限，这样会造成文字自动换行，这个时候我们可以使用white-space样式让他一排显示不换行，为了隐藏超出的文字内容可以再加一个css overflow:hidden样式，就会出现这样一个效果。通常我们使用于强制一行显示内容 通常我们使用white-space:nowrap强制文本文字内容不换行，在对象内一行显示完所有文字内容。white-space语法： white-space : normal nowrap。
css white-space:nowrap属性用法（可以强制文字不换行输出）
10-26
在实际应用中，`white-space: nowrap`常与`display: inline-block`或`display: flex`结合使用，以实现自适应的布局效果。例如，创建一个横向排列的项目列表，即使项目名称很长也不会导致换行： ```css .list-item {...
详解flex实现左右布局中按钮溢出隐藏效果
09-22
`text-overflow: ellipsis`用于在文本溢出时显示省略号，`overflow: hidden`隐藏超出容器的元素内容，`white-space: nowrap`则防止文本换行，保持在一行内显示。 在文章给出的例子中，初始尝试是直接将这些样式应用...
flex布局实现左侧文字溢出省略右侧文字自适应
09-22
同时，为了实现文字溢出省略，我们需要`overflow: hidden`、`text-overflow: ellipsis`以及`white-space: nowrap`： ```css .left { background: #3cc8b4; flex: 1 1 auto; overflow: hidden; text-overflow: ...
uni-app列表项实现左划操作功能
02-25
white-space: nowrap; } .item { display: inline-block; padding: 10px; background-color: #fff; margin-right: 10px; box-sizing: border-box; } .operate { display: flex; background-color: #f00; ...
关于white-space:nowrap；影响flex布局问题
psh305的博客
05-07 557
查询MDN得知：在其他普通布局中，元素的min-width默认值为0，再flex弹性布局中，min-width默认值为0；而当元素设置white-space：nowrap，该元素宽度被撑开。翻译：默认情况下，flex项不会缩小到其最小内容大小（最长单词或固定大小元素的长度）以下。因此，上面例子中右侧元素被撑开，左侧固定宽高元素被挤压。前端开发中经常遇到两列布局，其中左侧固定，右侧自适应。给自适应元素加上css: min-width: 0;效果如下：与我们预期有些出入。
flex 遇上white-space:nowrap的2种解决方法
包磊磊的博客
10-04 918
需求：使用flex布局，超出部分想使用点点点显示 一、方法1使用min-width:0 效果： HTML代码如下： <div class="team-body"> <div class="team-item"> <div class="team-item-header"> <div class="team-item-thumb"> <img src="htt
关于 white-space: nowrap； 影响 display: flex； 布局的问题
wolffy_911的博客
03-27 2347
关于 white-space: nowrap; 影响 display: flex; 布局的问题
禁止换行“white-space:nowrap;”！
weixin_30348519的博客
12-27 177
“white-space:nowrap;” 　　<html> 　　　　<div class="box">精彩的生活，精彩的世界</div> 　　</html> 　　<style> 　　　　.box{ 　　　　　　width: 100px; 　　　　　　height: 25px; 　　　　　　white-space:now...
css中white-space:nowrap,css强制不换行white-space:nowrap
weixin_34536193的博客
08-04 844
css强制不换行white-space:nowrap(2009-11-25 17:12:53)标签：itTags：强制不换行div{white-space:nowrap;}自动换行div{word-wrap: break-word;word-break: normal;}强制英文单词断行div{word-break:break-all;}CSS设置不转行：overflow:hidden 隐藏whi...
white-space: nowrap 导致有宽度也不换行的问题
Tizzy_Joel的专栏
05-23 2289
如果一些元素的样式中有"white-space: nowrap;",并且这些元素之间没有空格，             则即使包含这些元素的父类定义了宽度，这些元素也不换行。             如果要换行，则在这些元素间加空格。
body 没有被撑开_flex布局被子元素撑开如何保持内容不超出容器的方法
weixin_36242516的博客
12-31 1067
移动端里面，flex 布局很好用，它能够根据设备宽度来自动调整容器的宽度，但是最近在做项目的时候发现一个问题：一个li里面设置了flex,flex: 0 0 33.333%,然后想让子元素里面的文字超出flex定义宽度后自动省略。 小米小米小米小米小米小米小米小米小米小米小米小米ul{display: flex;}li{-webkit-box-flex: 0;-ms-flex: 0...
flex布局和white-space: nowrap； 冲突解决
yqdid的博客
05-31 1120
虽然可以通过设置max-width或者min-width来限制元素的宽度，但我们的设备宽度是不固定的，所以设置一个固定的区间并没有用，我们需要的是这个元素它能在自适应的情况的下文本溢出依旧有效。flex: 1 表示：flex: 1 1 0%（第三个值flex-basis会默认添加单位）flex 布局下，想要设置文字不换行，并且超出部分省略号显示的效果。使用flex-basis：width失效，前者优先级高（MDN）一般来说应该解决了，但是 ，我设置了还是不起作用。给设置flex的元素设置。
display: flex; flex-wrap: wrap; align-items: center; white-space: nowrap;
06-13
这是CSS中的一些属性，用于控制元素的布局和排列方式。...- `white-space: nowrap`: 当元素内部有文本内容时，将文本内容强制不换行，保持在同一行内显示。 这些属性可以用于实现响应式布局和适应不同屏幕大小的场景。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值