flex布局超过显示省略号

最新推荐文章于 2025-04-17 07:00:28 发布

街边吃垃圾

最新推荐文章于 2025-04-17 07:00:28 发布

阅读量2.5w

点赞数 4

分类专栏： css 文章标签： flex超出 flex显示省略号

css 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用CSS的Flex布局来创建不同长度的弹性盒子，并通过实际代码演示如何调整各盒子的长度分配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注：转载 http://blog.youkuaiyun.com/zgh0711/article/details/78270555

代码块

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

<div class="main">
    <div class="content">
        <h4 class="name">a namea namea namea namea</h4>
    </div>
    <div class="content">
         <h4 class="name">b namea namea namea namea </h4>
    </div>
    <div class="content">
         <h4 class="name">c namea</h4>
    </div>
</div>

<style type="text/css">
.main {
    display: flex;
}
.content {
    overflow: hidden;  /*也可以用 width:0 代替*/
    flex: 1;   /*关于flex的属性值请看官网，这里相当于 flex-grow */
    border:1px solid red;
}
.name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

效果：
这里写图片描述

以上的盒子都是固定的长度，如果你想设置不同的长度，就分开改各自的flex属性即可。

代码块

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

<div class="main">
    <div class="long">
        <h4 class="name">a namea namea namea namea</h4>
    </div>
    <div class="short">
         <h4 class="name">b namea namea namea namea </h4>
    </div>
    <div class="short">
         <h4 class="name">c namea</h4>
    </div>
</div>

<style type="text/css">
.main {
    display: flex;
}
.long {
    overflow: hidden;
    flex: 2;  //这里控制长度
    border:1px solid red;
}
.short {
    overflow: hidden;
    flex: 1;
    border:1px solid red;
}
.name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>