CSS奇遇 -- flex和white-space:nowrap的相爱相杀

需求：使用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: 1;
  color: #AAAAAA;
  min-width: 0;
}

二、第二种方式，代码如下，关键代码是.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>

转载[http://www.cnblogs.com/llcdxh/p/9869876.html]

需求：使用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: 1;
  color: #AAAAAA;
  min-width: 0;
}

二、第二种方式，代码如下，关键代码是.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>

CSS奇遇 -- flex和white-space:nowrap的相爱相杀

猜你喜欢