需求：使用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. vscode调整字体大小

    在vscode中,通过setting>User>Text Editor>Font可以调整字体大小,但是这里只是调整右侧的代码编辑区域的字体,左侧的侧边栏确无法调整字体大小,找了很久都 ...

  2. 【Winform-最大化窗体】Winform设置窗体最大化，填满整个屏幕

    设置窗体最大化,填满整个屏幕//this.MaximizedBounds = Screen.PrimaryScreen.WorkingArea;//this.MaximumSize = Screen. ...

  3. mybatis sql语句中转义字符

    问题: 在mapper  ***.xml中的sql语句中,不能直接用大于号.小于号要用转义字符 解决方法:   1.转义字符串 小于号    <    < 大于号    >    & ...

  4. Android App常用控件

  5. 在gitlab上删除分支后，本地git branch -r还能看到

    1. git remote prune --dry-run origin 查看当前有哪些是该消失还存在的分支 2. git remote prune origin 删除上面展示的所有分支 3. git ...

  6. 实体类 @TableName&@TableField&@Version

    //指向表table_biao @TableName("table_biao)public class UserThirdLogin extends Model<UserThirdLo ...

  7. luogu 2294 [HNOI2005]狡猾的商人 差分约束

    一个差分约束模型,只需判一下有没有负环即可. #include <bits/stdc++.h> #define N 103 #define M 2004 #define setIO(s) ...

  8. 【转载】从头到尾彻底理解KMP

    转自:http://blog.csdn.net/v_july_v/article/details/7041827 从头到尾彻底理解KMP 作者:July 时间:最初写于2011年12月,2014年7月 ...

  9. [python之ipython] jupyter notebook在云端服务器上开启，本地访问

    本地ssh到云端: ssh username@xxx.xxx.xxx.xxx -L127.0.0.1:7777:127.0.0.1:8888 把云端的8888端口映射到本地的7777端口 云端运行指令 ...

  10. json常用的注解

    json注解: 1.@JsonIgnoreProperties: 此注解是类注解,作用是json序列化时将java bean中的一些属性忽略掉,序列化和反序列化都受影响. 写法将此标签加在model ...