概述
在開發(fā)中，我們常遇到這種布局：A、B、C 三段文本長度不固定，其中 A、C 占用空間較少，需要完整顯示；而 B 是自適應(yīng)區(qū)域，超出部分需省略顯示。A 與 B 共享同一容器，該容器與 C 同級，容器應(yīng)占據(jù)除 C 之外的所有剩余空間。HTML 結(jié)構(gòu)如下：
<div class="wrap">
<div class="infos">
<div>Soccer</div>
<div class="self">Campeonato De Reserva De Primera Division C</div>
</div>
<div class="live">Live</div>
</div>
如果按照常規(guī)思路編寫 CSS，比如：
.wrap {
display: flex;
align-items: center;
width: 350px;
border: 1px dashed #ccc;
padding: 4px 16px;
gap: 16px;
}
.infos {
flex: 1;
display: flex;
gap: 8px;
align-items: center;
}
.self {
flex: 1;
padding: 4px;
background-color: silver;
border-radius: 6px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.live {
padding: 4px 16px;
background: cornflowerblue;
border-radius: 6px;
color: white;
flex-shrink: 0;
}
渲染效果往往會出現(xiàn)問題，示例如下：
可以看到，.self 被內(nèi)容撐開，導(dǎo)致右側(cè) “Live” 按鈕被擠出容器。
異常分析
問題的根源在于 Flex 子項的默認行為：
在 Flex 布局中，子元素的默認 min-width 是 auto，意味著它會根據(jù)內(nèi)容寬度確定最小值，導(dǎo)致內(nèi)容不會被壓縮。
因此，當 .wrap 的空間不足時，.infos 會拒絕被壓縮，從而讓內(nèi)部的 .self 也失去“省略”的機會。
要讓 .self 的 text-overflow: ellipsis 生效，必須確保它在空間不足時可以被壓縮。
解決方案也很簡單：給 .infos 設(shè)置 min-width: 0 即可。
這告訴瀏覽器，“.infos 可以比它內(nèi)容更窄”，從而允許內(nèi)部 .self 根據(jù)空間自動裁切。
實現(xiàn)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flex 布局下文字省略不生效？原因其實很簡單</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrap {
display: flex;
align-items: center;
width: 350px;
border: 1px dashed #ccc;
padding: 4px 16px;
gap: 16px;
}
.infos {
flex: 1;
display: flex;
gap: 8px;
align-items: center;
min-width: 0;
}
.self {
flex: 1;
padding: 4px;
background-color: silver;
border-radius: 6px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.live {
padding: 4px 16px;
background: cornflowerblue;
border-radius: 6px;
color: white;
flex-shrink: 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="infos">
<div>Soccer</div>
<div class="self">Campeonato De Reserva De Primera Division C</div>
</div>
<div class="live">Live</div>
</div>
</body>
</html>
總結(jié)
| 層級 | 是否需要 min-width: 0 | 原因 |
|---|
| .wrap | ? | 最外層容器，無需壓縮 |
| .infos | ? | 是 .wrap 的 flex 子項，默認 min-width: auto 會阻止內(nèi)部壓縮 |
| .self | ? | 父層已允許壓縮，無需重復(fù)設(shè)置 |
結(jié)論：在 Flex 布局中，當內(nèi)部文字的省略不生效時，優(yōu)先檢查文字外層的容器 是否設(shè)置了 min-width: 0。大多數(shù)情況下，只需在容器層加上這一行，就能徹底解決問題。
轉(zhuǎn)自https://juejin.cn/post/7557880524083249203
該文章在 2025/10/10 10:41:29 編輯過
400 186 1886
