Flexbox 影响溢出换行行为

2023-12-04

看看这个片段。这就是如何overflow-wrap: break-word应该管用:

.wrap{
   overflow-wrap: break-word;
}
<div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal 
  </div>
</div>

现在看看如何结合改变其行为display:flex:

.wrap{
   overflow-wrap: break-word;
   display: flex;
}
<div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal 
  </div>
</div>

如何编辑第二个片段以不显示水平滚动条? (不使用溢出:隐藏)

Thanks


当你给予display: flex to the wrap,默认情况下的元素a and b are flexed在一条线上。

现在另一个默认的弹性盒子孩子 is the min-width财产是auto默认情况下,所以元素a and b需要一个min-width与其内容相对应。这样设置min-width: 0事情又回到了normal- 请参阅下面的演示:

.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0; /* ADDED */
}
<div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flexbox 影响溢出换行行为 的相关文章

  • 如何使用XPath选择非空段落?

    我想要抓取的网页具有类似的结构 每个都有一个段落是一个问题 一个段落是一个答案 我想抓取每个问题和答案并将它们存储在两个项目中 问题是 在某些页面上 问题和答案分别是 xxx p 1 and xxx p 2 但在其他页面上 xxx p 1
  • 如何让CSS选择以字符串开头的ID(不是Javascript)?

    如果 HTML 中有这样的元素 id product42 id product43 如何匹配所有以 product 开头的 id 我已经看到了完全使用 javascript 执行此操作的答案 但是如何仅使用 CSS 执行此操作 id pro
  • 电子邮件链接在 Android 上不起作用

    我有 HTML 格式的点击电子邮件链接的代码 它在我的电脑上运行良好 但在移动设备上不起作用 我只有 Android 所以我不知道问题是否仅在 Android 上或所有移动设备上 当我按下链接时 浏览器显示 网页无法显示 邮寄至 电子邮件受
  • 从字体到跨度(大小和颜色)和背面的正则表达式(VB.NET)

    我正在寻找一个正则表达式 可以将我的字体标签 仅具有大小和颜色属性 转换为具有相关内联CSS的span标签 如果有帮助的话 这将在 VB NET 中完成 我还需要一个正则表达式来实现相反的效果 下面详细说明的是我正在寻找的转换示例 font
  • 使用内联样式有哪些风险?

    A 内容安全政策 https developer mozilla org en US docs Web HTTP CSP with a default src or style src指令将阻止内联样式应用于
  • Beautifulsoup findAll 是如何工作的

    我注意到一些奇怪的行为findAll的方法 gt gt gt htmls p class slytherin p p class gryffindor p gt gt gt soup BeautifulSoup htmls html par
  • div 中的文本字符有限,添加“阅读更多”链接并在单击链接时显示所有字符

    我有一个 div 里面有文本 使用 PHP 和 MySQL 显示 结构如下 div class description p Here is a lot of text p div 我想在 p 标签内的文本超过 100 个字符时显示 阅读更多
  • 类方法作为 JavaScript 中的事件处理程序?

    JavaScript 中是否有最佳实践或通用方法将类成员作为事件处理程序 考虑以下简单示例
  • Android SoundPool 堆限制

    我正在使用 SoundPool 加载多个声音剪辑并播放它们 据我所知 它的功能 100 正确 但在 load 调用期间 我的日志中充斥着以下内容 06 09 11 30 26 110 ERROR AudioCache 23363 Heap
  • TDD/测试 CSS 和 HTML? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 有没有办法测试 CSS 和 HTML 例如 有时某些通知会受到某些 CSS 更改的影响 我不想每次进行更改时都手动测试所有通知 Tha
  • 在其他不可滚动的 div 上滚动时如何滚动可滚动的 div?

    我知道这个问题听起来很令人困惑 但这就是我想要做的 在下面的代码片段中 如果用户在绿色 div 上滚动 我希望黄色 div 相应地滚动 就像滚动黄色 div 一样 请注意 黄色 div 有overflow auto 但绿色的则不然 docu
  • 将 JSON 发布到 Python CGI

    我已经安装了 Apache2 并且 Python 可以工作 但我有一个问题 我有两页 一个是 Python 页面 另一个是带有 JQuery 的 Html 页面 有人可以告诉我如何让我的 ajax 帖子正常工作吗
  • 在流体设计中将元素的宽度调整为其高度的百分比,反之亦然? [复制]

    这个问题在这里已经有答案了 我正在制作响应式设计 无论屏幕尺寸是什么 它都必须保持其元素的比例 高度与宽度 所以我不知道任何元素的像素大小 并且我只能以 工作 我可以将宽度或高度设置为浏览器大小的百分比 但我不知道如何设置其他属性值 仅使用
  • 在按钮之间添加空间?

    嗨 我这里有一个代码 除了一件事之外 一切都很完美 代码中每个按钮之间没有空格 我尝试过 margin 但不幸的是它是一个无序列表 所以我有点困惑 我将添加或替换什么以在两个按钮之间留出空间 帮助
  • 用于渲染 html 子集的 Django templatetag

    我有一些 html 在本例中是通过 TinyMCE 创建的 我想将其添加到页面中 但是 出于安全原因 我不想只打印用户输入的所有内容 有谁知道模板标签 最好是过滤器 只允许呈现 html 的安全子集 我意识到 Markdown 和其他人就是
  • GWT 主题/模板 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在使用 GWT 开发一个应用程序 尽管 GWT 是基于 JAVA 的媒介 但外观和感觉只能通过 CS
  • 将输入中每个单词的第一个字符设为大写

    我想知道如何在输入区域自动生成单词的第一个字符 目前我的代码是 Name
  • Outlook 2013 渲染问题:嵌套表格截断相邻文本

    在开发 html 电子邮件通讯时 我经常使用类似于以下的结构 table width 244 border 0 cellpadding 0 cellspacing 0 tr td table border 0 align left tbod
  • 在 Bootstrap 中使用 CakePHP 时如何修改包装器 div 错误类

    我在用着Bootstrap 3 0RC1 with CakePHP 2 3 6 尝试利用那些漂亮的课程 例如has error and has warning for 验证状态 http getbootstrap com css forms
  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是

随机推荐

  • 从xsd获取html表单

    我有一个相当复杂的 xsd 文件 它描述了一些对象 这并不重要 但它是 DATEX II 标准 您知道是否有一种自动方法来创建 html 表单 就像 向导 一样指导用户创建 xsd 中描述的 xml 对象 这个问题的答案取决于目标用户群 您
  • QuartusII 14.1.0 Debian Linux 崩溃

    我无法在 64 位计算机上将 Quartus 14 1 0 与 Linux Debian wheezy 和 Jessie 一起使用 如果我在控制台上启动它 我会收到以下消息 user fpgaformation opt altera 14
  • 在同一个应用程序中从右到左和从左到右语言?

    据我了解 苹果不允许应用程序商店上有两个不同语言的相同应用程序 但是如果一种语言是从左到右 另一种语言是从右到左怎么办 这意味着不同的菜单 不同的项目定位 不同的用户界面等 甚至连 Segue 也不同 显然我不能为此使用常规本地化 有没有解
  • FindWindow 查找窗口Ex

    我编写了一个程序 用于在另一个程序中查找一个框并将焦点设置到它 完成此操作后 它将发送密钥并保存到此框中 I am using Findwindow and FindwindowEx to locate the box but I have
  • 无法获取存储锁定文件上的锁定

    我正在构建一个带有嵌入式 Neo4j 和 Spring Data 的项目 并且我遇到文件锁定问题 我收到异常 Caused by org neo4j kernel StoreLockException Unable to obtain lo
  • Spring boot在配置类中注入EntityManagerFactory

    我正在使用 Spring Boot 我想将 Spring 与 Hibernate 集成 我想制作一个会话工厂 bean 供进一步使用 但我无法自动装配 EntityManagerFactory 我无法仅在配置类中自动装配它 在其他类中它可以
  • 如何使用 MySQL 查询查找文本字段中的第一个数字?

    我喜欢只返回存储在数据库表列中的文本的第一个数字 用户已将页面范围放入 p 2 5 或 第 2 至 5 页 或 2 5 等字段中 我对这里的 2 感兴趣 我尝试过了 SELECT SUBSTR the field LOCATE 2 the
  • 获取未定义索引:REQUEST_URI - 在 Laravel 中运行 Artisan 命令时

    每次我尝试在 Laravel 上运行 artisan 命令时 我都会收到以下错误 我位于项目目录中 例如 我运行这个命令 php artisan make migration create stats table 我收到此错误 ErrorE
  • 从 C# 调用 Excel 宏时出错

    我正在尝试使用以下命令从 Excel 文件调用宏C 4 5 我的Excel版本是2010 当我尝试调用宏时 出现以下错误 Cannot run the macro MacroName The macro may not be availab
  • 如何居中对齐 UICollectionView 的单元格?

    我目前正在使用UICollectionView对于用户界面网格 它工作得很好 但是 我想启用水平滚动 网格支持每页 8 个项目 当项目总数为 4 时 这就是启用水平滚动方向的情况下项目的排列方式 0 0 x x 0 0 x x 这里 0 g
  • 单色计时器

    我想在 Android 2 2 的 C monodroid 程序中使用计时器 但它不起作用 这是我的代码 using System using System Timers using Android App using Android Co
  • 在哪里创建和使用 ScheduledThreadPoolExecutor、TimerTask 或 Handler?

    我需要让我的 RSS Feed 阅读器每 10 分钟检查一次 feed 中是否有新帖子 然后在有新帖子时解析它们 我还需要大约每分钟更新一次用户界面 我从不同的来源读到和听到了不同的事情 我目前的理解是我可以使用ScheduledThrea
  • intel Pin:分析例程检测到 ah 寄存器而不是 rsp (REG_STACK_PTR)

    I asked this前几天的问题 我想获取堆栈分配大小 在函数创建之后 答案建议这样做 if INS Opcode ins XED ICLASS ADD INS Opcode ins XED ICLASS SUB REG INS Ope
  • 当 Jotform 提交并集成到电子表格时触发 Google Apps 脚本

    有没有办法在集成并提交 Jotform 时触发 Google Apps 脚本 我想甚至有一种触发创建的新行的方法 这就是我正在寻找的流程 Jotform 提交 gt gt Google 电子表格 gt gt 触发 Google Apps 脚
  • “流浪者规定”有效,但我无法使用 Ansible 发送临时命令

    我已经用 Vagrant 设置了一台机器 并为其创建了一个基本的 Ansible 剧本 当我跑步时一切都按预期进行 vm abla gt vagrant provision 但我无法使用 Ansible 向机器发送临时命令 这是为什么 我已
  • .NET 0x80040154 (REGDB_E_CLASSNOTREG):检索 CLSID {XXXX} 组件的 COM 类工厂

    我正在尝试跑步COM扫描仪项目但抛出以下异常 由于以下错误 检索 CLSID 9F8D4F16 0F61 4A38 98B3 1F6F80F11C87 的组件的 COM 类工厂失败 80040154 类未注册 HRESULT 异常 0x80
  • Laravel 中的 SQL 注入预防

    我是 Laravel 的新手 我正在学习它 我们在 Laravel 中做什么来防止 sql 注入 什么是依赖注入以及我们如何防止这种情况发生 提前致谢 SQL注入不好 依赖注入很好 以及它的两个独立的东西 SQL注入是一种攻击 依赖注入是编
  • 如何将通用枚举转换为 int?

    我有一个如下所示的小方法 public void SetOptions
  • 如何使用 R 将向量作为行附加到已保存的 .RData 文件中

    这个问题有点不言自明 但我应该补充一点 我不想加载该文件 我正在寻找类似的东西append TRUE为了保存一个 RData文件 我想做这样的事情 save df file mtcars Rda append TRUE 这是一个可重现的示例
  • Flexbox 影响溢出换行行为

    看看这个片段 这就是如何overflow wrap break word应该管用 wrap overflow wrap break word div class wrap div class a first div div div clas