问题场景：

在使用 flex 布局时，当内容超出宽度时的换行问题

问题描述：

flex 布局时，内容超过盒子宽度时，当内容为中文时会自动换行显示，而内容是一串英文字符或者数字时，就不会自动换行显示，如下图：

<div class="grid"><div class="grid-cell"><span>Flex 是 Flexible Box 的缩写，意为"弹性布局"。Flex 是 Flexible Box 的缩写，意为"弹性布局"。</span></div><div class="grid-cell"><span>QAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQAQA</span></div><div class="grid-cell"><span>123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890.12345678901234567890</span></div><div class="grid-cell"></div><div class="grid-cell"></div>
</div>

.grid {display: flex;
}
.grid-cell {flex: 1;min-height: 50px;border: 1px solid #000;background: pink;
}

谷歌、火狐浏览器下：

IE 浏览器下：

可以看到，不论是在 IE 浏览器，还是谷歌、火狐浏览器中，纯字母或者数字的内容并不会折行显示。

原因分析：

连续的字母或者数字会被当做一个单词或文本内容，故不会像文字一样的主动换行显示。

解决方案：

给每项添加 word-break: break-all，即可解决问题。

.grid-cell {flex: 1;min-height: 50px;border: 1px solid #000;background: pink;word-break: break-all;
}

使用flex 布局时，英文不自动换行相关推荐

vue flex 布局实现div均分自动换行
vue flex 布局实现div均分自动换行许久没有更新了,今天才意外发现以前还是没有看懂盒模型,今天才算看懂了,首先我们今天来看一下想要实现的效果是什么?当然适配是必须的,1920 或者 1376 ...
解决：flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行
直接上问题,如图所示: 我们在对父容器设置 flex-wrap:wrap 之后,容器内的容器成员在换行时中间出现了一个空行,这是因为我们忘记对容器设置align-content属性,在我们对外层容器加 ...
解决 flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行的问题
这两天写了一个页面发现 flex布局自动换行属性导致上下两行div中间有空行,下面先说现象. 这是中间有空行的现象导致整个页面看起来很难受 ... 通过加了一个属性 align-content ...
css_flex弹性盒模型/flex布局/flex在线可视化工具
文章目录 contents1: content 2: 测试你对flexbox的掌握 flex 模型 flex在线可视化工具(visual guide to css3 flexbox) flex布局 f ...
CSS弹性盒子布局——flex布局的基本概念
<CSS弹性盒子布局--flex布局的基本概念> Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的子元素之间提供了强大的空间分布和 ...
2022-11 CSS：flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中
1.父盒子不限制宽度,子盒子跟随子盒子最长长度如上图第二行子元素宽度会跟随第一行宽度解决方案: 对第二行设置:width: max-content; 使其宽度跟随自身内容 2.flex布局时,挤压 ...
flex布局交叉轴方向对齐方式详解
今天重新研究了一下flex布局发现了一个一直没有理解透而忽略的问题~ align-content属性和align-items属性的作用和区别? 之前学flex布局时看的是阮一峰大神的博客感觉很不错,今 ...
flex布局，最后的一个元素布满剩余空间
设置父元素flex布局时,第一个元素宽度固定,第二个元素布满剩余空间以下是react-native中的代码 .father{display: 'flex',flexDirection: " ...
html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...

使用flex 布局时，英文不自动换行

问题场景：

问题描述：

原因分析：

解决方案：

使用flex 布局时，英文不自动换行相关推荐

最新文章

热门文章