需求：使用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. ubuntu服务器常用命令

    1.查看系统版本 cat /etc/issue cat /etc/lsb-release 2.查看cpu lscpu 3.查看内存 free -m 4.查看硬盘大小 fdisk -l |grep Di ...

  2. BZOJ 1257 [CQOI2007]余数之和 数学

    都不知道说什么好...咕咕到现在.. 求:$\sum_{i=1}^n \space k\space mod \space i$ 即求:$n*k-\sum_{i=1}^n\space \lfloor \ ...

  3. luogu 1373 小a和uim之大逃离 dp

    有取模操作,所以直接维护模意义下的差即可. Code: #include <bits/stdc++.h> #define M 16 #define N 801 #define ll lon ...

  4. g++版本低于4.7使用C++11

    编译时需要添加: 需要添加头文件#include<memory> g++ -std=gnu++0x share_ptr.cpp -o s 原文: C++11 features are av ...

  5. JS核心知识点：DOM\BOM\EVENT

    1.DOM(Document Object Model) :文档对象模型2. DOM节点:页面中最基本的组成部分 3. childNodes:获取某个节点下所有的子节点 在标准及ie9以上 : 会获取 ...

  6. When you want to succeed as bad as you wanna breathe, then you’ll be successful.

    上周末登了次山,回来就各种矫情犯懒.今天周四一周又要完蛋,我发现自己真的是对时间流逝无可奈何.然后中午看了把小码哥网站还有MJ博客什么的,各种首期班大爆照,心中羞愧无比.年纪大也不能放弃自己啊,要不人 ...

  7. ARTS打卡计划第十三周

    Algorithms: https://leetcode-cn.com/problems/longest-continuous-increasing-subsequence/ 最长连续子序列. Rev ...

  8. Linux孤儿进程与僵尸进程

    1. 基本概念: 孤儿进程:父进程退出,但是其子进程仍然在运行,那么这些子进程被称为孤儿进程:孤儿进程会被init进程收养,并作善后处理: 僵尸进程:一个已经终止,但是其父进程尚未对齐进行善后处理的进 ...

  9. idea git操作 -- 已有项目添加到git

    我们在使用git时,如果是先从git克隆项目,然后配置项目运行没问题,如果将已有项目添加到git,则项目环境还是提交不了git,还需要到克隆的仓库文件夹打开项目去操作git,如果有有类型情况可按照如下 ...

  10. 深度学习之Faster-R-CNN

    哎!还是看大神博客吧 https://blog.csdn.net/liuxiaoheng1992/article/details/81843363