需求：使用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. zabbix添加监控项以及常用的键值

      zabbix自身提供了丰富的监控项,下面以“cpu空闲值”为例介绍zabbix如何添加新的监控项 1.创建主机群组 配置——主机群组——创建主机群组 2.创建主机 配置——主机——创建主机 3.添 ...

  2. 配置NFS共享

    NFS(网络文件系统)-------> linux与linux平台 服务器端: 1.安装软件nfs-utils(服务:nfs-server) 2.创建共享目录:mkdir /nfs_dir 3. ...

  3. python控制窗口移动（轨迹为圆）

    需先打开一个无标题记事本, import win32con import win32gui import time import math notepad = win32gui.FindWindow( ...

  4. 【java设计模式】-06原型模式

    原型模式简述 定义: 使用原型实例指定待创建对象的类型,并且通过复制这个原型来创建新的对象 ,也就是通过复制现有对象实例产生新的对象,也就是所谓的"克隆" 实现方式: 1.实现Cl ...

  5. 国产手机的谷X服务

    我换了个新手机,但面临了一个棘手的问题,就是原来的手机的谷X服务是用免root安装器自动安装好的,安装器找不到了.而后我发现现在的手机并没有阉割掉谷X服务,原因不详,好处不用在去一个个安装了.我装好y ...

  6. iOS学习之Autolayout

    转载自:http://vit0.com/blog/2013/12/07/iosxue-xi-zhi-autolayout/ 学习资料 文章 Beginning Auto Layout Tutorial ...

  7. Q窗口操作函数（窗口最大化，全屏，隐藏最大化最小化按钮）

    //Qt主窗口没有最小化,最大化按钮且最大化显示  int main(int argc, char *argv[]) { QApplication a(argc, argv); TestQtForWi ...

  8. 线上应用接入sentinel的第一个流控规则

    sentinel接入第1个应用A以及控制台,已经上线一段时间了,本周接入了第2个应用B: 因为测试同学只有几个,没有压测团队.测试平台.. 各接口能承载的最大qps不确定 ,接入的应用暂时都没有配置规 ...

  9. 【麦兜搞it】Python入门

    一.基本数据类型 整型.浮点型.布尔型内容略 1.字符串的格式化 name='python' age=27 # 打印“我是python,今年27岁了” new_str='我是'+name+',今年'+ ...

  10. 解决 无法启动此程序，因为计算机中丢失opencv_world341.dll。请尝试重新安装改程序已解决此问题

    在运行OpenCV程序时报错:“无法启动此程序,因为计算机中丢失opencv_world341.dll.请尝试重新安装改程序已解决此问题”. 解决方法 我的bin目录是 D:\opencv\build ...