css小技巧之flex布局下子元素单行长文本显示省略号

最新推荐文章于 2024-05-10 10:16:57 发布

等周末的爱码士

最新推荐文章于 2024-05-10 10:16:57 发布

阅读量3.5k

点赞数 1

分类专栏：前端笔记文章标签： html css 省略号不跨行 flex

本文链接：https://blog.csdn.net/sxjit/article/details/104393985

版权

前端笔记专栏收录该内容

18 篇文章 3 订阅

订阅专栏

一、单行长文本显示省略号
先讲讲常规情况下长文本不跨行显示省略号的代码：

overflow: hidden;  //不允许内容超出盒子
white-space: nowrap;   //不允许文本跨行
text-overflow: ellipsis;   //文本超出部分以“...”省略号表示

overflow：对超出的内容进行处理
white-space ：对文本格式进行规定
text-overflow ：对超出的文本进行处理
属性值等详细内容可以自行百度作补充学习

二、flex布局下的处理技巧
前面讲到的是常规情况，而在实战flex复杂布局下则会出现单行长文本显示省略号操作失败的问题：
在这里插入图片描述
两种解决方式：
1.在flex项目盒子上设置overflow:hidden；
2.在flex项目盒子上设置min-width:0
（注：采用flex布局的元素，称为Flex容器；它的第二层子元素都称为flex项目。）

源代码可参考研究：

<body>
    <div class="one">
        <div class="one-son"></div>
        <div class="one-text-content">
            <div class="one-text">这是一条很长很长的文本</div>
        </div>
    </div>
</body>
<style>
    .one{
        display: flex;
        width: 150px;
        height: 50px;
        overflow: hidden;
    }
    .one-son{
        min-width: 50px;
        height: 50px;
        background: red;
    }
    .one-text-content{
        background: rgb(189, 183, 101);
        flex: 1;
        overflow: hidden;  /* 或者 min-width:0 */
    }
    .one-text{
        overflow: hidden;  /*不允许内容超出盒子*/
        white-space: nowrap;   /*不允许文本跨行*/
        text-overflow: ellipsis;   /*文本超出部分以“...”省略号表示*/
    }
</style>

等周末的爱码士

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
css小技巧之flex布局下子元素单行长文本显示省略号

一、单行长文本显示省略号先讲讲常规情况下长文本不跨行显示省略号的代码：overflow: hidden; //不允许内容超出盒子white-space: nowrap; //不允许文本跨行text-overflow: ellipsis; //文本超出部分以“...”省略号表示overflow：对超出的内容进行处理white-space ：对文本格式进行规定text-ove...
复制链接

扫一扫