flex模式文字溢出问题

最新推荐文章于 2024-07-18 11:02:55 发布
最新推荐文章于 2024-07-18 11:02:55 发布
阅读量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
关注
专栏目录
flex布局详解_flex布局中的一些基本概念
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
09-06 600
flex布局的基本概念Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局CSS Grid Layout，可以同时处理行和列上的布局。什么是Flex布局，Flex是Flexible Box的缩写
CSS3 Flex 伸缩盒模型布局
爱人BT的博客
12-26 382
一、Flex 布局是什么？ CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局（Flexible Box）模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。 CSS3引入的布局模式Flex布局，主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ，以最佳的方式填充可用空间。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布局中，保持内容不超出容器的解决办法
Alex_Zhao 的博客
10-18 7万+
在移动端，flex 布局很好用，它能够根据设备宽度来自动调整容器的宽度，用起来很方便，已经越来越离不开它，但是最近在做项目的时候发现一个问题。就是在一个设置了 flex:1 的容器中，如果文字很长，这时候文字就会超出容器，而不是呆在设置好的动态剩余的空间中。
flex子元素固定宽度被压缩，flex为1的宽度超出父元素显示不全
最新发布
aleluye的博客
07-18 268
当父元素的宽度为flex，子元素一个是。（table），变化页面宽度，会出现。固定宽度被压缩，表格宽度超出。，一个宽度自适应占据剩下的。固定宽度元素增加属性。
flex布局时，文字超长没有换行显示
weixin_41285537的博客
04-04 1008
flex布局，文字超长显示不会换行
flex布局中子元素内容超出时，子元素本身出现滚动条实现方法
Misnice的博客
07-02 845
flex布局中子元素宽度平均分配，并且当子元素内容超出时，子元素本身出现滚动条
用css截取字符实现文字自动截断隐藏溢出文本
09-25
在网页设计中，文字内容在容器中完整显示是一种基本需求，但有时我们希望在内容超出容器宽度时自动隐藏多余的文本，仅显示前一部分，并以省略号（…）代替被隐藏的内容，这就是文字自动截断隐藏溢出文本的功能。...
flex布局，弹性盒子，css使用及理解
qq_54598736的博客
10-11 1136
flex布局，弹性盒子，css使用及理解
flex弹性布局
weixin_48454173的博客
09-16 205
弹性布局-Flexible Box Layout Model 一.前言： 1.什么是布局(Layout)？ 使用CSS将各种类型的HTML元素进行合理的结构性安排 2.布局方式的分类 （1）传统布局-盒模型布局(Box Layout Model) 流+display+float+position,兼容性好,效率低,移动端限制大; （2）flex(flexible)布局 - 弹性布局模型(Flexible Layout Model) 历史版本： 2009年 第一次草案 {display:box} 2011
Flash中所支持的Html标签
风之影
06-24 280
Flash中所支持的Html标签   &lt;a&gt; 超链接标签　　属性：href: 链接地址　　target: 目标窗口 可取值为_blank,_parent,_self,_top。　　例： my_txt.htmlText="&lt;a href='http://www.blueidea.com' target='_self'&gt;蓝色理想&lt;/a&gt;"   　　&l...
针对flex布局下文字溢出的解决方法
weixin_67321774的博客
09-30 3211
flex布局，文字溢出
flexbox布局text文本单行显示多余省略号代替
jasonzds的博客
02-01 6042
index.wxml 微信小程序开发微信小程序开发微信小程序开发微信小程序开发微信小程序开发微信小程序开发 index.wxss .myview {   display: flex;   width: 100%; } .myview text {   width: 98%;   overflow: hidden;   text-overflo
css flex布局文字过长，宽度被撑开的解决办法
凉瓜拌面的博客
12-25 4816
先上问题图 <!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:auto元素内容超出显示省略号设置无效 解决方案
苍老师背后的男人
10-13 5003
举个例子：content元素的 width 为 200px（即下图 黄色背景），中间有两层div，分别是 aaa 和 bbb，都是flex布局，且没设置width，最里面一层有个p 元素。要求： p 元素的 宽度 根据 内容的长度 自适应； 若 p 元素内容超长，则显示为省略号； 问题：从上图可以看出，内容超出时，虽然设置了css样式，但并没有变成 省略号。 解决方案：p元素加多一个 width: 0 即可。如下图： 注意：width的值可以随便设置，只要不是百分比类的单位( 如vw，%..
解决flex盒子被内容撑开以及如何显示两行文本后省略
qq_68153822的博客
06-21 2612
这个CSS属性定义了用于元素布局的盒子类型。"-webkit-box"的值是特定于基于WebKit的浏览器（如Safari和旧版本的Chrome）的。将其设置为"break-all"表示单词将在任何字符处换行，即使在单词内部，以适应指定的框内的内容。：这个CSS属性用于处理元素内的文本溢出情况。设置为"ellipsis"表示如果文本超出可用空间，将显示省略号(...)来表示截断。：这个CSS属性用来指定如何处理超出元素框的内容。将其设置为"hidden"表示超出元素尺寸的内容将被裁剪并隐藏。
flex布局中子元素过长溢出解决方案
qq_33755655的博客
07-06 1561
flex布局子元素文字过多，自动省略号隐藏
css利用flex分配剩余高度出现子组件溢出问题
HDdgut的博客
08-29 2767
是一个CSS属性，用于指定弹性容器内弹性项目的伸缩能力和分配比例。情景：父组件高度一定，子组件中，其他子组件高度固定，一个子组件高度不确定（页面滚动列表）多重嵌套的时候，父组件中也有flex:1，同样需要使用overflow属性控制溢出；当子组件的内容超出了容器的高度(父组件)时候，（推荐），或是限制子组件的最大高度。1.利用flex分配剩余高度/宽度。
flex布局，溢出换行
04-19
在Flex布局中，可以通过设置容器的属性来控制溢出换行的方式。 常用的属性有： 1. flex-wrap：用于控制子元素的换行方式。默认值为nowrap，表示不换行；设置为wrap时，子元素会自动换行。 2. flex-flow：是flex-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值