flex模式文字溢出问题

最新推荐文章于 2024-07-16 18:15:42 发布
最新推荐文章于 2024-07-16 18:15:42 发布
阅读量7.1k 收藏 1
点赞数
分类专栏： html 文章标签： flex 文字溢出
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yujiayinshi/article/details/72631178
版权

使用flex布局，左边自适应，右边固定
结果左边的文字太长了，需求是显示一行，超长显示…
相信一般的做饭都是
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
但是这个做法的前提是固定宽度，比如width：200px

麻烦就来了，现在左边是自适应，使用width：calc（1-200px）不起作用
那怎么解决呢：

给父层元素加上max-width:calc（1-右边宽度）
然后给它本身增加一个width：100%
基本就解决了

yujiayinshi
关注
专栏目录
用css截取字符实现文字自动截断隐藏溢出文本
09-25
在网页设计中，文字内容在容器中完整显示是一种基本需求，但有时我们希望在内容超出容器宽度时自动隐藏多余的文本，仅显示前一部分，并以省略号（…）代替被隐藏的内容，这就是文字自动截断隐藏溢出文本的功能。...
【大屏可视化】flex布局时字体溢出时 使用js使溢出自动缩放字体
艺术就是爆炸!
05-16 666
flex布局
弹性布局flex 和 溢出隐藏
最新发布
weixin_45573681的博客
07-16 438
溢出隐藏与flex结合使用失效的情况
flex布局: 一行显示固定个数,强制换行且均匀分布(超出的分布靠左)
热门推荐
EnidChann的博客
10-24 7万+
如图需求: 1. 一行显示3个 2. 强制换行 3. 宽度不写死 4. 高度固定 -- html <div class="mycards"> <div class="card_item"></div> <div class="card_item"></div> <div class="card_item"&g...
针对flex布局下文字溢出的解决方法
weixin_67321774的博客
09-30 3219
flex布局，文字溢出
flexbox布局text文本单行显示多余省略号代替
jasonzds的博客
02-01 6043
index.wxml 微信小程序开发微信小程序开发微信小程序开发微信小程序开发微信小程序开发微信小程序开发 index.wxss .myview {   display: flex;   width: 100%; } .myview text {   width: 98%;   overflow: hidden;   text-overflo
flex3的cookbook书籍完整版dpf（包含目录）
07-14
3.9 节在容器内控制滚动和溢出 3.10 节控制Box 组件的布局 3.11 节使用容器初始化 3.12 节创建TitleWindow 3.13 节通过LinkBar 控制ViewStack 3.14 节将ViewStack 的选中索引数绑定到一个变量上 3.15 节使用延迟实例...
reactnative可用css样式】1
08-08
可以取值为一个数字，表示组件的 flex 比例，或者是字符串 'row'、'row-reverse'、'column'、'column-reverse'，表示组件的 flex 方向。 * flexDirection：用来控制组件的 flex 方向。可以取值为 'row'、'row-...
JQuery悬停控制图片轮播——代码简单
10-23
除此之外，还添加了上一个和下一个控制按钮<ul class="flex-direction-nav">以及分页控制<ol id="bannerCtrl" class="flex-control-nav flex-control-paging">。 在CSS代码部分，定义了轮播容器的布局和样式，包括...
CSS3_AULA8_EJERCICIO3
02-13
7. **文本和字体**：学习如何使用CSS3来控制文本样式，如文字阴影（`text-shadow`）、文字溢出（`text-overflow`）、字体样式（`font-family`, `font-weight`, `font-size`）和行高（`line-height`）等。 通过"CSS3...
Flex中的文字
技术杂货铺
06-13 655
Flex Label
flex弹性布局
Jy123_的博客
10-09 402
flex弹性布局 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，他已经得到了所 有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局是什么？ Flex是Flexible Box的缩写，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局 .box{ display: inline-flex; } Webkit内核的浏览器
css flex布局文字过长，宽度被撑开的解决办法
凉瓜拌面的博客
12-25 4821
先上问题图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>flex超出省略问题</title> <style> .flex{ display: flex; } .left{ flex:1 1 auto; background: red; } .left p{ width: 100%; text-
Flex弹性布局--学习笔记
qq_49074573的博客
09-24 274
flex弹性布局-学习笔记v1
flex 宽度自适应，文本溢出隐藏方法
qq_44767646的博客
07-14 3800
flex 宽度自适应，文本溢出隐藏方法 <div class="out"> <div class="left"> 我是图片 </div> <div class="right"> <p>我是文字我是文字我是文字我是文字</p> <div> </div> .out { display: flex; width: 200px; } .left { flex-shrink: 0; width:
Css Flex 弹性布局中的换行与溢出处理方法
忧郁的蛋的专栏
10-02 2万+
本文将详细介绍Flex布局中的换行与溢出处理方法，并结合具体的代码示例，帮助读者更好地理解与运用。2，使用flex属性：flex属性是flex-grow、flex-shrink和flex-basis的缩写。可以通过设置不同的flex-basis值来改变子元素的宽度，从而实现溢出内容的隐藏效果。在上述代码中，容器元素的宽度为400px，设置了flex-wrap属性为wrap，以及子元素的flex-basis属性为200px。在Flex布局中，当子元素的总宽度超过父容器的宽度时，有时我们需要进行换行处理。
flex布局中子元素过长溢出解决方案
qq_33755655的博客
07-06 1572
flex布局子元素文字过多，自动省略号隐藏
felx布局和一行文本溢出省略号无效问题
2301_77963042的博客
07-13 791
父元素明明已经设置了宽度，但是文本并不会被超出溢出隐藏，这里只需要给flex:1;的元素添加width:0;这里是一个flex布局，flex中有一个元素的类名是flex:1;
Flex开发常见问题与解决策略
"Flex常见问题100题涵盖了Flex开发中的各种挑战，包括配置、交互、数据类型、逻辑运算等多个方面。以下是一些关键知识点的详细解释： 1. **改变SWF输出设置**：在Flex项目属性中，通过"ActionScript Compiler"的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值