在flex中使用text:ellipsis

最新推荐文章于 2023-08-25 16:18:55 发布

shidaping

最新推荐文章于 2023-08-25 16:18:55 发布

阅读量3.4k

点赞数 1

分类专栏： web前端文章标签： flex ellipsis css

本文链接：https://blog.csdn.net/shidaping/article/details/71708978

版权

web前端专栏收录该内容

49 篇文章 0 订阅

订阅专栏

在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;
}

shidaping

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
在flex中使用text:ellipsis

在flex中使用text:ellipsis时，发现不起作用，代码如下： *{ padding: 0; margin: 0; box-sizing: border-box; } .flex{ display: flex;
复制链接

扫一扫