【转载】flex布局超过显示省略号

最新推荐文章于 2024-07-26 10:29:32 发布

weixin_30832983

最新推荐文章于 2024-07-26 10:29:32 发布

阅读量122

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/huyifei/p/10414302.html

本文探讨了使用Flex布局实现等宽多列布局的方法，并介绍了如何通过CSS属性处理标题文本溢出，实现优雅的省略显示。

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

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

转载于:https://www.cnblogs.com/huyifei/p/10414302.html