flex布局文本不换行不显示省略号的解决方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m0_37805167/article/details/78534231

<div class="container">
    <div class="title">我是标题</div>
    <div class="content">
        <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
    </div>
</div>

.container{
    display:flex;
}
.title{
    width:100px;
    height:100px;
}
.content{
    flex:1;
}
.content>p{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

此时当你的p标签中文字特别多的时候会特别长，并不会超出显示省略号，解决办法：
1. 给p的父元素加overflow：hidden
2. 给p的父元素加上width：0px;

.content{
    flex:1;
    overflow:hidden;
    /* width:0; */
}