带border的不定长度文字省略样式问题

Question

<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上无效...

Answer 1

自己解决了
在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;
}

Answer 2

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

Answer 3

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