在flex中使用text:ellipsis

来源：互联网发布：剑灵天族捏脸数据图编辑：程序博客网时间：2024/06/04 01:04

在flex中使用text:ellipsis时，发现不起作用，代码如下：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">    <meta name="format-detection" content="telephone=no, email=no">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-touch-fullscreen" content="yes">    <style type="text/css">      *{        padding: 0;        margin: 0;        box-sizing: border-box;      }      .flex{        display: flex;      }      .flex .column1 {        flex: 0 0 100px;      }      .flex .column2 p {        text-overflow: ellipsis;        overflow: hidden;        white-space: nowrap;        flex: 1;      }    </style>  </head>  <body>    <div class="flex">      <div class="column1">column1</div>      <div class="column2">        <p>中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>      </div>    </div>  </body></html>

发现p元素并没有实现超出自动使用...省略。

后来查了一下，有个小技巧，给column2加上min-width: 0, 问题解决。

代码如下：

.flex .column2 {  min-width: 0;}

0 0