flex布局文本不换行不显示省略号的解决方法_ftl 模板不支持flex 布局吗

<div class="container">
    <div class="title">我是标题</div>
    <div class="content">
        <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
    </div>
</div>
1
2
3
4
5
6

.container{
    display:flex;
}
.title{
    width:100px;
    height:100px;
}
.content{
    flex:1;
}
.content>p{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

.content{
    flex:1;
    overflow:hidden;
    /* width:0; */
}
1
2
3
4
5