flex布局下使用文字超出省略会造成外部容器被撑开的问题 - 代码天地

flex布局下使用文字超出省略会造成外部容器被撑开的问题

企业开发 2023-06-19 08:42:29 阅读次数: 0

问题描述

经常会遇到如此布局的文章列表页面设计，左侧图片固定大小，右侧按照浏览器宽度撑满剩余区域。

但在给文章标题增加文字超出省略时会遇到把外部容器撑开的情况。

在这里插入图片描述

问题出现的环境背景

在不增加文字超出隐藏时不会遇到撑开外部容器的问题，但是只要添加了文字超出隐藏的CSS样式，就会复现该问题。

解决方法

在这个位置加个min-width: 0;就好了

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_34626094/article/details/129873083

flex布局下使用文字超出省略会造成外部容器被撑开的问题

文字超出省略

flex自适应超出省略

CSS单行文字超出省略

文字超出省略号类型

超出省略

文字单行显示，多行显示，及超出省略号

css 文字超出省略号 ... 代替

css实现多行超出省略、单行超出省略与react中多行省略失效的问题

flex弹性布局模式下文字超出显示省略号

flex布局内部数据撑开外部盒子，导致溢出问题

文字溢出省略

超出省略号

CSS 文本超出省略

css 实现超出省略...

html——P标签与文字超出省略（text-overflow和white-space）

css文本超出省略号

关于table的换行和超出省略

CSS超出省略号显示

css控制文本超出省略...

text-overflow:ellipsis 文字超出省略号代替不起作用解决方法

css文字长度实现宽度自适应、显示三行超出省略号

微信小程序 text文本溢出省略后显示内容超出省略的内容

CSS解决文字超出显示省略号问题

移动端常见问题（单行和多行文字溢出省略）

iview表格文字超出后使用省略号

DIV文字展示(省略...、超出滑动等) - 使用white-space

css实现中文换行，英文换行，超出省略

超出省略号表示常见方式

单行和多行文本超出省略号

今日推荐

周排行

深度学习------Lingvo框架下的加速通道GPipe

webjars管理静态资源

C专家编程_2.2

mysql 源码安装

json文件操作

123231432

注解的实现

Spring MVC 控制器

《人月神话》读后感二

C#使用HttpWebRequest和HttpWebResponse上传文件示例

每日归档

更多

2024-09-08(0)

2024-09-07(0)

2024-09-06(0)

2024-09-05(0)

2024-09-04(0)

2024-09-03(0)

2024-09-02(0)

2024-09-01(0)

2024-08-31(0)

2024-08-30(0)