這個東西多看看代碼就可以了
<!DOCTYPE html>
<html>
<head>
<style>
.footer {
width: 300px;
height: 20px;
display: flex;
border: 1px solid #000;
}
.count {
background: #3cc8b4;
flex: 1 1 auto;/*flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。*/
width: 50px;
}
.icon {
flex-grow: none; /*icon設置爲固定元素，不會自適應增長*/
background: green;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 50px;
}
.title-container {
background: #9bc;
max-width: 200px;
}
.title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="footer">
<div class="title-container">
<div class="title">
rig323ssswwwwwwwwwwwwww
</div>
</div>
<div class="count">
(124)
</div>
<div class="icon">
>12334
</div>
</div>
</body>
</html>
這個也是一個經典的案例：
.footer {
width: 300px;
height: 20px;
display: flex;
overflow: hidden;
}
.left {
background: #3cc8b4;
flex: 1 1 auto; /*flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 50px;
}
.right {
background: #9bc;
max-width: 250px;
}
.right-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="footer">
<div class="left">
leftleftleftleftleftleftleftleftleftleftleftleftleft
</div>
<div class="right">
<div class="right-ellipsis">
rightrightrightrightrightrightrightrightright
</div>
</div>
</div>
基本上以上兩個案例搞懂了，內容固定，自適應，溢出都可以應對自如了