【在flex布局中，text-overflow：ellipsis不生效的问题 _flex _页面显示】

在flex布局中，text-overflow：ellipsis不生效的问题

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

flex 页面显示

详细描述

截图

代码

css代码
.txt2{
    width: 50%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin-bottom: 1.3rem;
    margin-top: 1.3rem;
    font-size: 1.4rem;
}
.listtxt{
    position: relative;
    display: flex;
    padding-left: 1.5rem;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: end;
    width: 100%;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #e1e5e7
}
html代码
<div class="listtxt">
<div class="txt2">
        <p>2015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-12</p>
    </div>
</div>

编辑于2024-04-24

时间排序

热门排序

[无名弟子]花项虎
0

p {
/* white-space: nowrap; */
overflow: hidden;
text-overflow: ellipsis;
}

在p标签加上这几行样式就行了。
overflow和text-overflow无法继承，white-space可以继承，所以你这个例子p标签可以不加white-space，但是其他两个属性是无法继承的。

查看全部>

编辑于2022-11-24

去第页