需求:使用flex布局,超出部分想使用點點點顯示
一、方法1使用min-width:0
效果:

<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)" οnclick="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>