🍤
TailwindCSSでFlexアイテムの一部だけを省略記号にする方法
問題：Flexレイアウトで特定の要素だけを省略したい
よくあるUIパターンとして、アバター・ユーザー名・ボタンを横並びにした際、画面幅が狭くなってもアバターとボタンは縮めず、ユーザー名だけを省略記号（...）で表示したい場面があります。
[Avatar] [Very Long Username Here...] [Button]
↑ これだけ縮む
解決方法：3つの魔法のクラス
🎯 必要なのはたった3つのクラスの組み合わせ
<div className="flex items-center gap-3">
{/* 縮まない要素 */}
<div className="flex-shrink-0">
<Avatar />
</div>
{/* 省略される要素 */}
<div className="min-w-0">
<p className="truncate">Very Long Username Here</p>
</div>
{/* 縮まない要素 */}
<button className="flex-shrink-0">
Follow
</button>
</div>
実装例
基本的な実装
function UserCard({ username }) {
return (
<div className="flex items-center gap-3">
{/* アバター：縮まない */}
<div className="flex-shrink-0">
<div className="w-10 h-10 bg-blue-500 rounded-full" />
</div>
{/* ユーザー名：必要に応じて省略 */}
<div className="min-w-0 flex-1">
<p className="truncate font-medium">{username}</p>
</div>
{/* ボタン：縮まない */}
<button className="flex-shrink-0 px-4 py-2 bg-blue-500 text-white rounded">
フォロー
</button>
</div>
);
}
実践的な例（React + shadcn/ui）
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
export default function CollectionAvatar({
userDisplayName,
userAvatarUrl
}) {
return (
<div className="flex items-center gap-2 min-w-0">
{/* アバターは縮まない */}
<Avatar className="h-6 w-6 flex-shrink-0">
<AvatarImage src={userAvatarUrl} />
<AvatarFallback>
{userDisplayName.slice(0, 2).toUpperCase()}
</AvatarFallback>
</Avatar>
{/* ユーザー名は必要に応じて省略 */}
<span className="text-sm truncate">
{userDisplayName}
</span>
{/* タイムスタンプも縮まない */}
<span className="flex-shrink-0 text-xs text-gray-500">
2時間前
</span>
</div>
);
}
🧠 わかりやすい覚え方：「固定・省略・ゼロ」の法則
「固・省・ゼ」（こしょうぜ）で覚える！
-
固（こ）：
flex-shrink-0→ 固定したい要素につける -
省（しょう）：
truncate→ 省略したいテキストにつける -
ゼ（ぜ）：
min-w-0→ 省略する要素の親にゼロ幅を許可
固定要素 → flex-shrink-0
省略テキスト → truncate
ゼロ幅OK → min-w-0（truncateの親要素）
視覚的に覚える
┌─────────────────────────────────┐
│ [📷] [名前が長すぎる...] [BTN] │
│ ↑ ↑ ↑ │
│ 固定 省略+ゼロ幅 固定 │
└─────────────────────────────────┘
よくある間違いと解決策
❌ ダメな例：min-w-0を忘れる
// truncateが効かない！
<div className="flex">
<span className="truncate">Long text here</span>
</div>
✅ 正しい例：min-w-0を追加
// ちゃんと省略される
<div className="flex min-w-0">
<span className="truncate">Long text here</span>
</div>
❌ ダメな例：手動で文字数カット
// JavaScriptで切る必要なし！
const truncated = username.length > 20
? `${username.slice(0, 20)}...`
: username;
✅ 正しい例：CSSに任せる
// CSSで自動的に最適な位置で省略
<span className="truncate">{username}</span>
応用：複数行での省略
<div className="flex items-center gap-3">
<img className="w-12 h-12 rounded-full flex-shrink-0" />
<div className="min-w-0 flex-1">
<p className="truncate font-medium">山田太郎@エンジニア</p>
<p className="truncate text-sm text-gray-500">
東京都渋谷区で活動中のフルスタックエンジニア
</p>
</div>
<button className="flex-shrink-0">詳細</button>
</div>
まとめ
Tailwindでflexレイアウトの省略記号を実装する際は：
-
固定したい要素には
flex-shrink-0 -
省略したいテキストには
truncate -
省略テキストの親要素には
min-w-0
「固・省・ゼ」で覚えれば、もう迷うことはありません！
Discussion