flex 布局下,css 设置文本不换行时,省略号不显示的解决办法
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度。
<div class="main">
<img alt="" class="logo" src="pic.jpg">
<div class="content">
<h4 class="name">a name</h4>
<p class="info">a info</p>
<p class="notice">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
.notice 会非常长,一些设备下需要隐藏显示,即不换行,并留下省略符 ... 作标记。
.main {
display: flex;
}
.logo {
width: 100px;
height: 100px;
margin: 10px;
}
.content {
flex: 1;
}
.content > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
这里会发现 text-overflow: ellipsis
不生效,省略符根本没有出现。
尝试取消父元素 .content 的 flex: 1
,无效。
尝试取消 .main 容器的 display: flex
,省略号出现。
因此猜测是 flex 布局的问题,进一步猜测省略符需要对父元素限定宽度。
尝试对父元素 .content 设置 width: 100%
无效,设置 width: 0
可行。即:
.content {
flex: 1;
width: 0;
}
更新:
如果不设置宽度, .content 可以被子节点无限撑开;因此 .notice 总有足够的宽度在一行内显示所有文本,也就不能触发截断省略的效果。
测试还有一种方法可以达到效果:
- 给 .content 设置
overflow: hidden
;
以下方法无效:
- 给 html, body 设置
max-width
,元素似乎能强行撑开页宽; - 给 body 设置
overflow
,页宽不能被撑开了,但元素宽度还在,即元素本身还是溢出; - 给 html, body 同时设置
max-width
和overflow
,页宽限定在 max-width 内,元素本身还是溢出; - 给 .main 容器设置
overflow: hidden
,同理 .main 是不溢出了, .notice 本身还是溢出; - 给 .notice 元素设置
width
或max-width
,虽然宽度受限,但在特定宽度下省略符 ... 显示不全,有时只显示两个点 .. 。
以上仅在 chrome 58.0.3029.81 下测试,系统为 Ubuntu 16.04.2 LTS 。
本文基于
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议发布,欢迎引用、转载或演绎,但是必须保留本文的署名BlackStorm以及本文链接http://www.cnblogs.com/BlackStorm/p/6793170.html,且未经许可不能用于商业目的。如有疑问或授权协商请与我联系。
flex 布局下,css 设置文本不换行时,省略号不显示的解决办法的更多相关文章
- flex布局下,css设置文本不换行时,省略号不显示的解决办法
大致是有一个main容器是flex布局,左边一个logo固定宽高,右边content动态宽度. <div class="main"> <img alt=" ...
- virtualBox 虚拟机下nginx设置不缓存静态文件不起作用解决办法
最近开发的时候,调整js时会一直使用缓存文件,无法显示改动!nginx配置静态文件add_header Cache-Control no-cache;也不起作用,很苦恼! nginx配置代码:even ...
- flex布局下el-table横向滚动条失效
如下图,是一种常见的页面结构,我们可以有很多方法实现,inline-block,float,flex等等 但是,最近项目中遇到一个怪事,左边是侧边栏导航,右边是一个数据展示table,el-table ...
- eclipse_neon 的Spket 目录下只有一个Task Tags,没有其他的选项,导致没有办法添加提示文件! 添加sdk文件之后还是没有办法显示的解决办法
问题解决办法: 将 spket-1.6.23的安装包里面的features plugins 单独复制到D:\eclipse_neon\dropins 目录下,重启一下eclipse即可正常显示! 添 ...
- QT5.1在Windows下 出现QApplication: No such file or directory 问题的解决办法
QT5.0.1在Windows下 出现QApplication: No such file or directory 问题的解决办法 分类: 编程语言学习 软件使用 QT编程学习2013-03-07 ...
- Linux下Oracle中SqlPlus时上下左右键乱码问题的解决办法
window下的sqlplus可以通过箭头键,来回看历史命令,用起来非常的方便. 但是在Linux下,会出现各种乱码,非常不方便,如下图所示,每次打错一个字符就需要重新打一遍. 解决办法:rlwrap ...
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...
- 如何设置文本不换行省略号显示等CSS常用文本属性
如何让多余的文本省略号显示首先要说几个属性的作用: whitespace:nowrap 中文行末不断行显示 overflow: 控制超出文本的显示方式:hidden 超出范围文本隐藏:scroll 始 ...
- 怎么从传统的盒子思想转为Flex 布局(css)
前端进化很快,总是有新的技术出来,开始可能有些人用惯了盒子模型的思想 依赖 display属性 + position属性 + float属性.这三大件.它对于那些特殊布局非常不方便 我们就来看看Fle ...
随机推荐
- Thinking in Java from Chapter 21
From Thinking in Java 4th Edition 并发 线程可以驱动任务,因此你需要一种描述任务的方式,这可由Runnable接口来提供. 要想定义任务,只需要实现Runnable接 ...
- Python PIL 库的应用
PIL (Python Image Library) 库是Python 语言的一个第三方库,PIL库支持图像存储.显示和处理,能够处理几乎所有格式的图片. 一.PIL库简介 1. PIL库主要有2个方 ...
- Android开发工程师文集-1 小时学会Widget小组件开发
前言 大家好,给大家带来Android开发工程师文集-1 小时学会Widget小组件开发的概述,希望你们喜欢 学会用Widget (小组件) Widget小组件很方便,很快捷,可以个性化,自己定制,相 ...
- location匹配
=/ 表示精确匹配 www.sensetime.com/ ~ :表示做正则表达式匹配,区分字符大小写 ~* : 表示做正则表达式匹配,不区分大小写 ^~: URI的左半部分匹配,不区分大小写 匹配优 ...
- Ubuntu下几个命令行方式使用的图片浏览工具
想找几个Ubuntu下可以以命令行方式使用的图片浏览工具. Google了一些资料,找到下面几个web: 1.pho:轻巧的命令行图片查看器 其中介绍了工具pho,其功能特点,见下面的转帖内容: ph ...
- Java 8 停止维护,Java 9 难产,IDEA 2018 发布,还有……
祝大家五一劳动节快乐,工作顺利! 又到了总结上个月干货的时候了,这个月我们带来了各种Java技术干货,各种送书抽奖福利,各种面试题分享,各种最新动态资讯等. 5.1重磅活动 | 区块链免费送书 &am ...
- 转载 Python 正则表达式入门(中级篇)
Python 正则表达式入门(中级篇) 初级篇链接:http://www.cnblogs.com/chuxiuhong/p/5885073.html 上一篇我们说在这一篇里,我们会介绍子表达式,向前向 ...
- golang中GOPATH的简单理解
1.为什么要配置GOPATH 配置GOPATH的用意是为了方便项目的部署和构建,以及可以直接使用go get 命令下载第三方的包到自己的项目的src下和相关的执行文件bin目录,和中间文件pkg sr ...
- 【精解】EOS TPS 多维实测
本文主要研究EOS的tps表现,会从插件.cleos.EOSBenchTool以及eosjs四种方式进行分析研究. 关键字:eos, tps, cleos, txn_test_gen_plugin, ...
- 内核开发知识第一讲.内核中的数据类型.重要数据结构.常用内核API函数.
一丶内核中的数据类型 在内核中.程序的编写不能简单的用基本数据类型了. 因为操作系统不同.很有可能造成数据类型的长度不一.而产生重大问题.所以在内核中. 数据类型都一定重定义了. 数据类型 重定义数据 ...