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

素颜马尾好姑娘i 2023-07-06 13:30 10阅读 0赞

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

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

**overflow**：对超出的内容进行处理  
**white-space** ：对文本格式进行规定  
**text-overflow** ：对超出的文本进行处理  
属性值等详细内容可以自行百度作补充学习  
  
  
**二、flex布局下的处理技巧**  
前面讲到的是常规情况，而在实战flex复杂布局下则会出现单行长文本显示省略号操作失败的问题：  
![在这里插入图片描述][20200219160849520.png]  
**两种解决方式：**  
1.在flex项目盒子上设置`overflow:hidden`；  
2.在flex项目盒子上设置`min-width:0`  
（注：采用flex布局的元素，称为Flex容器；它的第二层子元素都称为flex项目。）  
![在这里插入图片描述][20200219164111328.png]  
**源代码可参考研究：**

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

[20200219160849520.png]: https://img-blog.csdnimg.cn/20200219160849520.png
[20200219164111328.png]: https://img-blog.csdnimg.cn/20200219164111328.png