左边自适应内容，右边根据左边自适应进行字数隐藏

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="left">
            左边的内容左边的内容左边的内容左边的内容左边的内容左边的内容左边的内容
        </div>
        <div class="right">
            <div class="ellipsis">
                右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容
            </div>
        </div>
    </div>
</body>
<style>
    .container {
        display: flex;
        height: 25px;
    }

    .left {
        flex: 0 0 auto;
        border: 1px solid red;
    }

    .right {
        flex: 1 1 auto;
        position: relative;
        overflow: hidden;
        border: 1px solid black;
    }

    .ellipsis {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>



</html>

 

效果如下

 

posted @ 2023-11-28 10:05  飞飞飞飞0928  阅读(21)  评论(0)    收藏  举报