flex 遇到white-space:nowrap

背景，做一个前面图片宽度固定，后面宽度自适应，使用到了flex布局，但是想让后面div里文字不换行，超出以点点表示时，这时布局就乱了，查了下，原来flex布局与white-space:nowrap有影响

解决办法，父div设置min-width:0即可

 <div style="width:100%;display:flex;height:80px"><div style="width:50px"><img src="~/Content/Img/2.png" style="height:50px;" /></div><div style="flex:1;min-width:0">
                <div style="width:100%;height:40px;text-align:left;font-size:16px">
                    *******
                </div>
                <div style="width:100%;height:40px;text-align:left;font-size:14px;padding-left:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                 *********
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
时间： 2024-08-04 05:40:22

flex 遇到white-space:nowrap的相关文章

Java文法(3)—— White Space

------------------------------------------------------------------------------- 说明: White space is defined as the ASCII space character, horizontal tab character, form feed character, and line terminator characters (§3.4). ---------------------------

dom4j解析xml报错:Nested exception: org.xml.sax.SAXParseException: White space is required between the processing instruction target and data.

采用dom4j方式解析string类型的xml xml:        String string="<?xmlversion=\"1.0\" encoding=\"UTF-8\"?><ROOT><HEAD><INFO><BUSINESSNO>T065205072015000097</BUSINESSNO><BUSINESSTYPE>T</BUSINESSTYPE&g

White space is required before the encoding pseudo attribute in the XML declaration.

错误出现的位置: <?xml version="1.0"encoding="UTF-8"?> 正确方式: <?xml version="1.0" encoding="UTF-8"?> 错误原因:标签中的属相间需要用空格区分开

CSS 2 文本⑤

在实际的设计过程中 ,为了排版的好看 ,比如上面这行字 ,经常有这样的需求 ,当放不下的时候,我们会让它显示 ···· 那么这个.... 用css怎么实现呢 ?  我们可以用 text - overflow text - overflow text - overflow : clip | ellipsis clip : 默认值 ellipsis: 省略号 overflow : hidden ;   溢出的时候把它截掉,如果没有这个,溢出的时候不截掉,那text-overflow就不起作用了 wh

flex mxmlc 手动编译项目

首先: 1.下载flex的sdk,如果你电脑有装flash builder,它自带了一份,位于安装目录的sdks目录下. 备注:(sdk依赖java的jre) 2.配置mxmlc的java运行环境jre,该配置文件位于sdk/bin/jvm.config,更改java.home=jre所在目录. 3.配置mxmlc的环境变量,改环境变量exe,位于sdk/bin/mxmlc.exe,控制台输入:mxmlc,没报错证明配置成功. 注意:如果不配置,并且你之前有配置过java的jre,那么mxmlc

在UNIX系统下联合编译flex 和bison 程序

flex 是一款词法解析开程序,而bison是一款语法解析开源程序.他们配合使用,就可以完成某些计算机脚本语言的语言的解析,如sql.这次我主要介绍flex 和bison在unix系统下的编译. 先看flex 代码: %{ #include "fb1-5.tab.h"//该文件由bison后面的bison生成.主要定义了token 的值.和yylval变量 %} %% "+" { return ADD; }//匹配上“+”,就返回token ADD,yylval 此

使用flex和bison实现的sql引擎解析

由于老师要求,最近在做oceanbase存储过程的实现,在oceanbase 0.4以前是不支持存储过程的.实现的主要步骤主要包括 1.语法解析 2.词法解析 3.具体执行语法树的步骤 现在先来说说语法解析吧,在这一块主要是使用的flex( 词法分析器生成工具) 和bison(语法分析器生成器) 这两个是对用户输入的存储过程语句进行解析的 来具体说说该怎么实现对sql语句的分析吧 1.首先建立一个lex的文件 %option noyywrap nodefault yylineno case-in

真香的flex弹性布局

如何实现一个左中右的布局 在flex出现之前 #box{ color: white; } #left{ float: left; width: 30%; background-color: red; } #right{ float: right; width: 20%; background-color: green; } #center{ background-color: blue; overflow:hidden; /* 去除浮动换成 margin: 0 20% 0 30%; 效果一样 *

响应式设计手机端flex的用法

---恢复内容开始--- 今天总结一下flexbox的用法 它用于受极端的响应式布局,前面涉及的css和html知识不再多说,meta标签一定记住!<meta name="viewport",content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no:". 这其中有一个非常好的垂直水平居中方式,以前我们讲水平垂直居中,通常会用到这个,这