需求：使用flex布局，超出部分想使用点点点显示

一、方法1使用min-width:0

效果：

HTML代码如下：

<div class="team-body">

    <div class="team-item">

        <div class="team-item-header">

            <div class="team-item-thumb">

                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540468647594&di=8b2c0e34df2c77a1c738f2a954cf53ac&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20170921%2F596fd75d547e4de085041fe027afcb0d.jpeg"/>

            </div>

            <div class="team-item-content">

                <h3 class="team-name">景龙社区老年协会景龙社区老年协会</h3>

                <p class="team-slogan">舞动青春，展示风采景景龙社区老年协会</p>

                <p class="team-talent-type">唱歌、跳舞、太极拳、广场舞景龙社区老年协会</p>

            </div>

            <div class="team-item-extra">

                <p class="team-join-number">已加入人数：1070人</p>

                <p class="team-remaining-number">空缺人数：107人</p>

            </div>

        </div>

        <div class="team-item-bottom">

            <div class="team-item-leader">

                <div class="team-leader-badge">团长</div>

                <div class="team-leader-name">陈雪娇防守打法</div>

                <div class="team-leader-phone">13788827576</div>

            </div>

            <div class="team-item-botton-wrap">

                <a href="./viewmember.html">查看成员</a>

                <a href="javascript:void(0)" onclick="joinTeam(1)">加入团队</a>

            </div>

        </div>

    </div>

</div>

关键的CSS代码：整个头部设置为display:flex，两端的宽度固定，中间设置为flex:1,同时设置min-width:0

.team-container .team-body .team-item .team-item-header {

  height: 3.456rem;

  display: flex;

  align-items: center;

  position: relative;

}

.team-container .team-body .team-item .team-item-header .team-item-content {

  flex:;

  color: #AAAAAA;

  min-width:;

}

 二、第二种方式，代码如下，关键代码是.content中的的两行代码。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" />

        <title>测试</title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            .wraper{

                display: flex;

            }

            .wraper .content{

                flex: 1;

                display: flex;

                overflow: hidden;

            }

            .wraper .content p{

                overflow: hidden;

                white-space: nowrap;

                text-overflow: ellipsis;

                font-size: 20px;

            }

        </style>

    </head>

    <body>

        <div class="wraper">

            <div class="content">

                <p>地坛离我家很近。或者说我家离地坛很近。总之，只好认为这是缘分。地坛在我出生前四百多年就座落在那儿了，而自从我的祖母年轻时带着我父亲来到北京，就一直住在离它不远的地方</p>

            </div>

        </div>

    </body>

</html>

flex 遇上white-space:nowrap的2种解决方法的更多相关文章

  1. 出现 java.lang.OutOfMemoryError: PermGen space 错误的原因及解决方法

    一.原因及解决方法[1] 1.原因:堆内存的永久保存去区内存分配不足(缺省默认为64M),导致内存溢出错误. 2.解决方法:重新分配内存大小,-Xms1024M -Xmx2048M -XX:PermS ...

  2. SQL Server 无法在服务器上访问指定的路径或文件解决方法

    SQL Server 无法在服务器上访问指定的路径或文件解决方法 在SQL Server附加数据库或备份数据库时出现:无法在服务器上访问指定的路径或文件. 请确保您具有必需的安全权限且该路径或文件存在 ...

  3. linux上备份Oracle时EXP-00091的错误解决方法

    unix/linux上备份Oracle时EXP-00091的错误解决方法 unix/linux上备份数据时的错误解决方法 EXP-00091: Exporting questionable stati ...

  4. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  5. win服务器 文件上传下载出现“未指定的错误” 解决方法汇总

    环境 WIN平台IIS服务器   经常出现于ASPX页面 汇总 1.权限问题 出现场景 : 基于ACCESS数据库   原因解析 : 1.首先需要排除自身问题,例如建表使用关键字,格式错误,插入数据与 ...

  6. iOS相关，过年回来电脑上的证书都失效了，解决方法。

    今天发了个问题,就是关于电脑上的证书都失效的问题,就这个问题的解决方法如下:https://segmentfault.com/q/1010000004433963 1,按照链接下载,https://d ...

  7. 在CentOS7.1上安装Gitlab碰到的问题及解决方法

    一 前言 关于在CentOS7上安装Gitlab, 官方文档已经很详细了,步骤大家按照官方的安装文档一步一步安装即可, 这里就不在累述.官方安装文档地址:  https://about.gitlab. ...

  8. Android手机插上usb能充电但不能识别的一种解决方法

    设备要求 已root的Android手机. 背景 这个方法是意外发现的,最初同事有一台测试机插上usb能充电但不能识别,他让我帮他看看怎么回事,于是我就按照常规套路,开发者模式.usb调试.MTP什么 ...

  9. HBuilder/Mui开发ios使用上拉刷新导致滚动条无法使用的解决方法

    HBuilder/Mui开发的APP使用上拉刷新,当滚动到底部是会触发上拉刷新,加载更多数据.但是ios上确是一个坑,导致滚动条无法滚动. 解决方法 放弃Mui的上拉刷新,自己使用JS实现. var ...

随机推荐

  1. PHP函数相关知识点

    回调函数 <?php function myfunc($funcname,$name) { $name = "喜欢".$name; $funcname($name); } f ...

  2. 长春理工大学第十四届程序设计竞赛D Capture The Flag——哈希&&打表

    题目 链接 题意:给定一个字符串 $s$,求不同于 $s$ 的字符串 $t$,使得 $Hash(s) = Hash(t)$,其中 $\displaystyle Hash(s) = \sum_0^{le ...

  3. 6、DockerFile解析：三步走、保留字指令

    1.dockerfiel是什么 1.是什么 Dockerfile是用来构建Docker镜像的构建文件,是由一系列命令和参数构成的脚本. 2.构建三步骤 编写Dockerfile文件 docker bu ...

  4. GitLab 如何在 Web 界面中 Merge branch

    希望在 GitLab 中对 2 个 branch 进行合并,如何创建 Pull Request 并且如何进行合并呢? 在 GitLib 的 Web 界面中选择 Merge Requests 然后再界面 ...

  5. [Luogu] 引水入城

    https://www.luogu.org/problemnew/show/P1514 bfs + 线段覆盖 #include<bits/stdc++.h> using namespace ...

  6. 用python来抓取“煎蛋网”上面的美女图片，尺度很大哦！哈哈

    所用Python环境为:python 3.3.2   用到的库为:urllib.request    re 废话不多说,先上代码: import urllib.request import re #获 ...

  7. c 判断一个字符是否为字母数字

    #include <stdio.h> #include <wctype.h> int main () { int i; wchar_t str[] = L"c3po. ...

  8. Linux Redis的性能展示

    我们可以通过redis-cli 连接上redis ,例如 : redis-cli -h 127.0.0.1 -p 6379 连接上redis,然后通过INFO查看redis的一些信息.我们可以查看一些 ...

  9. OUC_Summer Training_ DIV2_#16 725

    今天做了这两道题真的好高兴啊!!我一直知道自己很渣,又贪玩不像别人那样用功,又没有别人有天赋.所以感觉在ACM也没有学到什么东西,没有多少进步.但是今天的B题告诉我,进步虽然不明显,但是只要坚持努力的 ...

  10. Java中的<< 和 >> 和 >>> 分析理解

    Java中的<< 和 >> 和 >>> 详细分析 <<表示左移移,不分正负数,低位补0: 注:以下数据类型默认为byte-8位 左移时不管正负,低 ...