• 329

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

图片描述
图片描述

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

阅读 633
评论
    3 个回答
    • 329

    自己解决了
    在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;
    }
    
    
      • 2.7k
      display:block;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;

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

          撰写回答

          登录后参与交流、获取后续更新提醒