当前位置：文江博客话题详情

CSS HTML HTML5 SASS

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

发布于 2022-09-11 22:35:28 字数 203 浏览 15 评论 0

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

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

耳根太软 2022-09-18 22:35:28

 <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>

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

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

22 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

linfzu01

文章 0 评论 0

§对你不离不弃

文章 0 评论 0

可遇━不可求

文章 0 评论 0

枕梦

文章 0 评论 0

qq_3LFa8Q

文章 0 评论 0

JP

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文