如何让不知道宽度的盒子实现文本溢出省略显示

Question

如何让不知道宽度的盒子实现文本溢出省略显示

悠悠

2931723

发布于
2019-09-25

如何让不知道宽度的盒子实现文本溢出省略显示

如图所示。三个盒子。绿色盒子有多少文本自动填充。宽度自己撑开。剩下的宽度给黑色盒子。黑色盒子的内容超出就用...展示。
请问各位大神，怎么实现？？？？？

html

html5 css sass

阅读 3k

1 个回答

JCat_李小黑

 <style>
        #boxs{
            display: flex;
            height: 700px;
            border: 3px solid red;
        }
        div{
            display: inline-block;
            height: 100px;
        }
        .box1,.box3{
            border: 3px solid green;
        }
        .box2{
            flex: 1;
            min-width: 100px;
            overflow: hidden;
            margin: 0 10px ;
            text-overflow: ellipsis;
            white-space:nowrap;
            border: 3px solid #000;
        }

    </style>
    
    <body>
    <div id="boxs">
        <div class="box1">asdasaasdaasdasdasdasd</div>
        <div class="box2">
            阿舍不得计算机的大V阿深V看是sad借鸡生蛋 奥术大师大撒
        </div>
        <div class="box3">
            水电费不啊深V地方近DVD和深V返回是sdfkfvdsk
        </div>
    </div>
</body>

如果我理解的没错的话，效果：

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

如何让不知道宽度的盒子实现文本溢出省略显示

你尚未登录，登录后可以

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

快开发完的Vue3项目要做SEO该如何处理？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？