在flex:1;的布局，文本超出显示省略号失效

作者: plum_meizi | 来源:发表于2020-03-23 18:12 被阅读0次

微信小程序小知识
flex布局和ellipsis冲突的解决办法（在flex中省略号
uni_app
省略号
常用且容易遗忘的CSS样式清单整理
布局之悬浮显示更多文本并增加箭头指示效果
作中常用且容易遗忘的 CSS 样式
less中一些公用的方法
常用且容易遗忘的 CSS 样式清单
CSS

在flex布局的时候，里面需要自动撑出宽度，超出之后要显示省略号，结果全部显示并且拉长页面

1585044641(1).jpg

如代码list使用display:flex;而li-center是flex:1;的时候，
li-name想要超出显示省略号，失效

    <div class="list">
        <img
            :src="imgsrc"
            alt=""
        >
        <div class="li-center">
            <p class="li-name">Ann ElliottAnn ElliottAnn ElliottAnn Elliott</p>
            <p class="li-time">01:28</p>
        </div>
        <div class="li-right">
            123
        </div>
    </div>

这个时候在li-center，加上overflow: hidden;就会达到想要的效果

微信小程序小知识
横向布局横向布局自动换行 Flex 布局教程：语法篇文本自动换行文字超出用省略号显示 wx.switchT...
flex布局和ellipsis冲突的解决办法（在flex中省略号
前言有时我们希望文本超出div宽度则显示省略号，但在使用flex布局时，使用text-overflow elli...
uni_app
弹性布局flex: 文字超出宽度后，显示省略号的解决办法 overflow:hidden; white-space...
省略号
CSS文本超出三行自动隐藏显示省略号 CSS文本长度超出宽度如何显示省略号
常用且容易遗忘的CSS样式清单整理
1、文字超出部分显示省略号单行文本的溢出显示省略号（一定要有宽度）多行文本溢出显示省略号 2、中英文自动换行 ...
布局之悬浮显示更多文本并增加箭头指示效果
记录一个界面交互的小功能 UI效果图需求描述文本只显示一行，超出显示省略号文本超出显示省略号的同时，在右侧显...
作中常用且容易遗忘的 CSS 样式
1、文字超出部分显示省略号单行文本的溢出显示省略号（一定要有宽度）多行文本溢出显示省略号中英文自动换行 wo...
less中一些公用的方法
minx.less 设置圆角默认为5px 多行文本超出显示省略号单行文本显示超出省略号清除浮动
常用且容易遗忘的 CSS 样式清单
1、文字超出部分显示省略号单行文本的溢出显示省略号（一定要有宽度）多行文本溢出显示省略号 2、中英文自动换行wo...
CSS
居中 Flex 文本溢出显示省略号不被挤文字换行