flex布局文本不换行不显示省略号的解决方法_vue中display: flex;下文本超出宽度后不显示省略号

<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; */
}