Cheny

不积跬步无以至千里

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; */
}
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m0_37805167/article/details/78534231
个人分类: 常用页面小问题
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭