https://johnnywang1994.github.io/book/assets/flex-item-truncate.html-BiKfxpeS.js

1import{_ as p,c as l,b as a,d as s,a as e,e as c,r as o,o as i}from"./app-BgYE7jZN.js";const u={};function d(r,n){const t=o("SocialBlock");return i(),l("div",null,[n[0]||(n[0]=a("h1",{id:"css-flex-文字省略號為何需要-min-w-0",tabindex:"-1"},[a("a",{class:"header-anchor",href:"#css-flex-文字省略號為何需要-min-w-0"},[a("span",null,[s("CSS: Flex 文字省略號為何需要 "),a("code",null,"min-w-0")])])],-1)),n[1]||(n[1]=a("h6",{id:"tags-css-layout-flexbox",tabindex:"-1"},[a("a",{class:"header-anchor",href:"#tags-css-layout-flexbox"},[a("span",null,[s("tags: "),a("code",null,"CSS"),s(),a("code",null,"Layout"),s(),a("code",null,"Flexbox")])])],-1)),e(t,{hashtags:"css,flexbox,layout"}),n[2]||(n[2]=c(`<h3 id="背景" tabindex="-1"><a class="header-anchor" href="#背景"><span>背景</span></a></h3><p>在做列表、卡片、訊息列這類常見 UI 時，通常會用 <code>flex</code> 排版：左邊放 icon / avatar，右邊放標題與描述。 文字太長時，我們也很自然會在文字節點加上 <code>truncate</code>（ellipsis）。</p><p>但實務上常遇到一個「看起來很像壞掉」的狀況： <code>truncate</code> 明明有加，文字卻完全不省略，反而把整個區塊撐開。</p><h3 id="範例" tabindex="-1"><a class="header-anchor" href="#範例"><span>範例</span></a></h3><p>以下是一個常見結構：父層固定寬度，左圖右文，右側用 <code>flex-1</code> 撐滿。</p><div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html"><pre><code class="language-html"><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-[300px] flex px-4 py-2 bg-gray-500<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
2<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span></span>
3<span class="line">    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-12 h-12 mr-3 rounded-[8px]<span class="token punctuation">&quot;</span></span></span>
4<span class="line">    <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>...<span class="token punctuation">&quot;</span></span></span>
5<span class="line">  <span class="token punctuation">/&gt;</span></span></span>
6<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex-1 flex flex-col justify-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
7<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex items-center text-l font-semibold<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
8<span class="line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>truncate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>ADAM STORE 亞果元素-蝦皮官方旗艦店<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>
9<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span></span>
10<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
11<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
12<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h4 id="原因" tabindex="-1"><a class="header-anchor" href="#原因"><span>原因</span></a></h4><p>關鍵點在 <strong>flex item 的預設最小寬度</strong>。</p><p>在 Flexbox 裡，flex item 預設是：</p><ul><li><code>min-width: auto</code></li></ul><p>而 <code>auto</code>

12 在 flex 情境下的行為，會讓元素的最小寬度趨近於「內容本身的最小需求寬度（min-content）」。 配上 <code>truncate</code> 內含的 <code>white-space: nowrap</code> 後，文字的 min-content 幾乎等於「整段文字完整寬度」。</p><p>結果就是：</p><ul><li>右側那個 <code>flex-1</code> 的容器 不願意被壓縮</li><li>沒有真正產生 overflow</li><li><code>text-overflow: ellipsis</code> 沒機會觸發</li><li><code>truncate</code> 看起來像失效</li></ul><hr><h4 id="解法原理-讓-flex-item-允許被壓縮" tabindex="-1"><a class="header-anchor" href="#解法原理-讓-flex-item-允許被壓縮"><span>解法原理：讓 flex item 允許被壓縮</span></a></h4><p>只要在「包含文字的第一層 flex item」加上 min-w-0：</p><div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html"><pre><code class="language-html"><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>min-w-0 flex-1 flex flex-col justify-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
13<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex items-center text-l font-semibold<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
14<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>truncate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>ADAM STORE 亞果元素-蝦皮官方旗艦店<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span></span>
15<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span></span>
16<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
17<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code>min-w-0</code> 等同於 <code>min-width: 0</code>，讓這個 flex item 的最小寬度變成 0，允許這個 flex item 的寬度被壓縮到比內容更小</p><p>此時 layout 才會如預期發生：</p><ol><li><p>父層固定寬度</p></li><li><p>左側圖片吃掉固定空間</p></li><li><p>右側被分配剩餘空間，且可被壓縮</p></li><li><p>文字超出 → overflow 出現</p></li><li><p><code>truncate</code> 才能畫出 ellipsis</p></li></ol><hr><h4 id="注意點" tabindex="-1"><a class="header-anchor" href="#注意點"><span>注意點</span></a></h4><ul><li><p><code>min-w-0</code> 要加在「會被 flex 壓縮的那層」上，通常是 flex-1 那個第一層容器，而不是文字的 span。</p></li><li><p>若中間還包了多層 flex / grid，可能每一層都在當 flex item，此時同樣要檢查是否需要一路補上 <code>min-w-0</code>。</p></li><li><p>反過來說，如果你刻意希望內容不要被壓縮（例如要完整顯示一行 SKU），那麼保留預設 <code>min-width: auto</code> 反而是合理選擇。</p></li></ul>`,24)),e(t,{hashtags:"css,flexbox,layout"})])}const m=p(u,[["render",d]]),g=JSON.parse('{"path":"/articles/css/flex-item-truncate.html","title":"CSS: Flex 文字省略號為何需要 min-w-0","lang":"zh-TW","frontmatter":{}

17,"git":{"updatedTime":1771942611000,"contributors":[{"name":"Johnny Wang","username":"","email":"[email protected]","commits":1}],"changelog":[{"hash":"8f0ef66d5ca57618b08062a92ad8c30aa5bec19c","time":1771942611000,"email":"[email protected]","author":"Johnny Wang","message":"UPD"}]},"filePathRelative":"articles/css/flex-item-truncate.md"}');export{m as comp,g as data};