flex布局下文字超出省略号代替不起作用解决方法
项目中发现,在flex布局下,希望目标元素文字超出省略号时,text-overflow: ellipsis属性无效,结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0、overflow: hidden,设置自身属性min-width:0也都不行。
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
结论就是上述只对有设置宽度
的块级
元素有效。也就是block或者是inline-block元素有效。前人说过,没有什么是套一层不能解决的,所以解决方案就是:套一层flex布局
点击链接即可预览
<div class="text-hide"
style='display: flex;
border:1px solid red;
'
>
<divstyle=' min-width: 0;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;'
>项目中发现,在flex布局下,希望目标元素文字超出省略号时,text-overflow: ellipsis属性无效,结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0、overflow: hidden,设置自身属性min-width:0也都不行。项目中发现,在flex布局下,希望目标元素文字超出省略号时,text-overflow: ellipsis属性无效,结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0、overflow: hidden,设置自身属性min-width:0也都不行。项目中发现,在flex布局下,希望目标元素文字超出省略号时,text-overflow: ellipsis属性无效,结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0、overflow: hidden,设置自身属性min-width:0也都不行。</div>
</div>
flex布局下文字超出省略号代替不起作用解决方法相关推荐
- text-overflow:ellipsis 文字超出省略号代替不起作用解决方法
场景重现 无效场景一 现在我们来一个正常的例子 <!DOCTYPE html> <html> <head> <meta http-equiv="Co ...
- Flex布局下,文字超出省略号显示无效解决方案
默认的flex布局下的 标题文字超出后省略号显示无效 解决办法: 在flex:1的盒子中,设置overflow: hidden; 或 width: 0;即可. <div class=" ...
- css文字超出省略号代替不起作用解决方法汇总大全
先贴一个文字超出后显示省略号的css样式: 单行文字超出显示省略号: .cont{overflow:hidden;/*内容超出后隐藏*/text-overflow:ellipsis;/*超出内容显示为 ...
- css不换行省略号 没作用,flex布局下,css设置文本不换行时,省略号不显示的解决办法...
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. a name a info Lorem ipsum dolor sit amet, co ...
- display:flex布局下white-space:nowrap失效问题解决
文字长度过长显示省略号的样式设置方法众所周知: h3 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } 然而有一次,我在 ...
- 弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
文字长度过长显示省略号的样式设置方法众所周知: <!-- 单行显示省略号 --> .css {white-space: nowrap;overflow: hidden;text-overf ...
- php 文字超出画布,input实现文字超出省略号(代码示例)
本篇文章给大家带来的内容是关于input实现文字超出省略号(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. input实现文字省略号功能 普通元素实现文字超出宽度自动变成省 ...
- input实现文字超出省略号功能
input实现文字省略号功能 普通元素实现文字超出宽度自动变成省略号非常简单,给元素加个宽度,然后再加这三句css即可: white-space: nowrap;text-overflow: elli ...
- css文字超出省略号显示
单行 width:100px; overflow: hidden;/*文字超出隐藏*/ text-overflow: ellipsis;/*文字超出省略号显示*/ white-space: nowra ...
最新文章
- ACMNO.19 C语言-对角求和 求一个3×3矩阵对角线元素之和。 输入 矩阵 输出 主对角线 副对角线 元素和 样例输入 1 2 3 1 1 1 3 2 1 样例输出 3 7
- Spring Cloud【Finchley】-13 Eureka Server HA高可用 2个/3个节点的搭建及服务注册调用
- leetcode(2)---两数相加
- 雨滴桌面时间插件_只需要五步,让你的桌面变得干净漂亮
- 《Windows 系列》- 修改hsot
- 易语言学习笔记(一)
- 动作电位的产生和动作电位的长距离高速传导
- 客服客户聊天系统源码分享
- Direct I/O in DOSBOX for COMM serial communications with QBasic, TBasic or Pbasic
- C语言 弹小球 小游戏(控制台)
- 如何科学地蹭热点:用python爬虫获取热门微博评论并进行情感分析
- 网络营销推广的主要工作
- Java学习第七项--类和对象
- 二进制、八进制、十进制以及十六进制
- Docker系列(1-简介篇) -- 为什么要使用docker?
- 【LaTeX应用】tikzpicture绘制流程图,框架图,训练模板直接套用即可
- 非华为电脑管家连接平板--无法连接问题解决方案之一
- 【高级篇 / DNS】(7.0) ❀ 05. 用花生壳作 FortiGate 的 DDNS ❀ FortiGate 防火墙
- html网页弹幕特效,jquery仿哔哩哔哩弹幕文字动画特效
- python杨辉三角问题
热门文章
- 基于双目视觉的非标机械臂的空间定位流程(未完待续)
- Torvalds谈Linux行为准则
- 代码主题darcula_仿IntelliJ Darcula的Swing主题FlatLaf使用方法
- 手机植入木马可以监视你的一举一动,黑客是怎样入侵别人手机的?
- 001,Python微信接龙脚本与腾讯会议定时挂网课脚本
- 根据机器码实现软件注册
- echart地图加载中国地图,可切换省市地图
- adc0808模数转换实验报告_模数转换实验报告
- 7-2 查询水果价格 (15 分)
- js 时间转东八区_js:固定与东八区服务器时间保持一致并且可选时间格式