1

图片描述
图片描述

<div class='parent'>
    <div class='div1'>超长内容</div>
    <div class='div2'>
        <span class='tag'>标签内容</span>
    </div>
</div>

.parent {
    width: 200px;
    display: flex;
    border: 1px solid pink;
}
.tag {
    border: 1px solid skyblue;
}

求CSS大神实现如图效果😢

普通ellipsis肯定不行了,如果省略加在div2上,蓝色border的右边也会被截断,加在tag上无效...

kiwi 329
2018-12-10 提问
3 个回答
0

已采纳

自己解决了
在tag上省略失效主要是要在父元素上设置min-width,这是flex和省略组合的常见问题...

.parent {
    width: 200px;
    display: flex;
    border: 1px solid pink;
}
.div2 {
    flex: 1;
    min-width: 0;
}
.tag {
    border: 1px solid skyblue;
    display: inline-block;
    max-width: 100%;
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}

1
display:block;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;
0

对父元素设置宽度,并设置overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

撰写答案

推广链接