需求：使用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. java中volatile关键字的含义（转载）

    在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言是支持多线程的,为了解决线程并发的问题,在语 ...

  2. HDU 6085 - Rikka with Candies | 2017 Multi-University Training Contest 5

    看了标程的压位,才知道压位也能很容易写- - /* HDU 6085 - Rikka with Candies [ 压位 ] | 2017 Multi-University Training Cont ...

  3. 关于单片机特殊功能寄存器（SFR）和内存（RAM）公用地址：80-FF 如何区分

    RAM 的 80-FF 需要间接寻址进行访问 如:  MOV R0,#80H;    MOV A,@R0 ;  (内存 80H地址内的数据放到A中) SFR的80-FF需要直接寻址进行访问如: MOV ...

  4. 在 CentOS 7 上安装 RabbitMQ

    RabbitMQ 服务器在安装之前需要安装 erlang. 最新版本的 RabbitMQ 3.8.0 需要 Erlang 21.3 以上的版本支持. 在这里,我们需要在你的 CentOS 中安装 Er ...

  5. Python数据抓取（1） —数据处理前的准备

    (一)数据抓取概要 为什么要学会抓取网络数据? 对公司或对自己有价值的数据,80%都不在本地的数据库,它们都散落在广大的网络数据,这些数据通常都伴随着网页的形式呈现,这样的数据我们称为非结构化数据 如 ...

  6. 利用状态机(FSM)进行简单的uart串口发送数据

    module uart_tx(clk,rst_n,key,txd); input clk; input rst_n; input key; output reg txd; :] state; :] b ...

  7. Django基础之命名URL和URL反向解析

    在使用Django项目时,一个常见的需求是获得URL的最终形式,以用于嵌入到生成的内容中(视图中和显示给用户的URL等)或者用于处理服务器端的导航(重定向等). 人们强烈希望不要硬编码这些URL(费力 ...

  8. OpenGL 开发环境配置：Visual Studio 2017 + GLFW + GLEW

    Step1:Visual Studio 2017 Why 开发环境,后面编译GLFW 和 GLEW也要用 How 这里使用的是Visual Studio 2017的 Community 版本,直接官网 ...

  9. Spring Cloud Eureka（三）：认识Eureka Server 与 Eureka Client

    Spring Cloud Netflix 是什么 This project provides Netflix OSS integrations for Spring Boot apps through ...

  10. sql到python正则

    import urllib.requestimport re,timeresult=[]for i in range(100):    urls ="http://xxx.com/-1%20 ...