フロントエンド開発において、Flexboxレイアウト内でコンテナからはみ出すテキストが、期待される省略記号（...）ではなく物理的に途切れて表示されるという問題に遭遇することがあります。本稿では、この一般的な課題に直面し、その解決に至るまでの具体的な過程を詳細に解説します。

問題の発生状況

あるコンポーネントにおいて、垂直方向のレイアウトではテキストの省略表示が正常に機能していましたが、水平方向のレイアウトに切り替えた際に、長いテキストが単に切断されるだけで省略記号が現れないという現象が発生しました。

当初の水平レイアウト向けのCSS設定は以下の通りでした。

.material-button--horizontal .material-name {
  flex: 1; /* 親要素の残りのスペースを埋める */
  margin: 0 6px;
  text-align: left;
  font-size: 12px;
  white-space: nowrap;     /* テキストの改行を禁止 */
  overflow: hidden;        /* コンテナからはみ出る内容を非表示 */
  text-overflow: ellipsis; /* はみ出たテキストの代わりに省略記号を表示 */
}

このCSSスニペットは、理論上はテキストが省略記号付きで表示されるはずですが、実際の動作ではテキストが途切れるだけで省略記号は現れませんでした。

最初の試み：min-width: 0 の追加

Flexboxレイアウトでテキストが期待通りに縮小しない場合の一般的な解決策として、対象要素にmin-width: 0を追加することが知られています。そこで、このプロパティを.material-nameクラスに適用しました。

.material-button--horizontal .material-name {
  /* 既存のプロパティ */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* Flexアイテムがコンテンツサイズよりも小さくなることを許可 */
}

結果：効果なし

テキストは依然として途切れたままで、省略記号は表示されませんでした。このことから、問題がより深い部分にあることを示唆していました。

二度目の試み：完全な flex プロパティの指定

さらに、flex: 1の簡略形ではなく、flex-grow、flex-shrink、flex-basisを明示的に指定することで挙動が変わるかを検証しました。

.material-button--horizontal .material-name {
  flex: 1 1 0%; /* flex-grow:1, flex-shrink:1, flex-basis:0% と同義 */
  /* その他のプロパティ */
  min-width: 0;
}

結果：改善なし

こちらも問題解決には至りませんでした。Flexコンテナの階層に問題がある可能性を疑い始めました。

三度目の試み：親要素への min-width: 0 設定

子要素だけでなく、Flexコンテナである親要素にもmin-width: 0を適用することで、Flexコンテキスト全体に影響を与えるかを確認しました。

.material-button--horizontal {
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* アイテムを左寄せ */
  min-width: 0; /* 親コンテナにも最小幅を設定 */
}

.material-button--horizontal .material-name {
  flex: 1;
  /* その他のプロパティ */
  min-width: 0;
}

結果：失敗

この変更によっても期待する結果は得られませんでした。使用しているTDesignコンポーネントライブラリの内部構造が影響している可能性を検討し始めました。

四度目の試み：固定幅での検証

問題がFlexbox特有のものなのか、それともテキスト省略表示自体の設定に誤りがあるのかを切り分けるため、.material-name要素に固定幅を設定してテストしました。

.material-button--horizontal .material-name {
  width: 120px; /* テスト用に固定幅を設定 */
  margin: 0 6px;
  text-align: left;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

結果：成功！しかし要件に不適合

このテストでは省略記号が正しく表示されました。これは、CSSのwhite-space, overflow, text-overflowの組み合わせ自体は正しく機能していることを示していますが、要件は要素が残りの幅に応じて可変であることでした。

根本原因の特定

詳細な調査の結果、問題の根源は使用しているTDesignボタンコンポーネントの内部DOM構造にあることが判明しました。

TDesignのt-buttonコンポーネントは、スロットコンテンツを<span>要素でラップする内部構造を持っていました。つまり、私たちの.material-name要素はFlexコンテナの直下ではなく、この内部<span>要素のさらに子要素として配置されていたのです。

おおよそのHTML構造は以下のようになっていました。

<t-button class="material-button">
  <span> <!-- TDesignによって自動挿入されるラッパー要素 -->
    <div class="material-preview">...</div>
    <div class="material-name">長いテキストコンテンツ...</div>
  </span>
</t-button>

このTDesignが挿入する内部<span>要素が、デフォルトのスタイルによって私たちの意図するFlexboxの挙動を妨げていた可能性が高いと結論付けました。

最終的な解決策：内部要素へのスタイル穿透

Vueのスタイルスコープ機能である:deep()セレクタを用いて、TDesignボタン内部の<span>要素に直接スタイルを適用することで問題が解決しました。

.material-button--horizontal :deep(> span) {
  display: flex;       /* 内部spanをFlexコンテナとして定義 */
  align-items: center; /* 垂直方向の中央揃え */
  width: 100%;         /* 親コンテナの全幅を使用 */
  min-width: 0;        /* 内部Flexアイテムが縮小することを許可 */
}

.material-button--horizontal .material-name {
  flex: 1; /* 残りのスペースを埋める */
  margin: 0 6px;
  text-align: left;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* テキスト要素も縮小可能にする */
}

結果：成功！

これにより、テキストはコンテナの残りの幅に合わせて適切に調整され、はみ出した場合には正しく省略記号が表示されるようになりました。

なぜこの解決策が有効だったのか？

1. 内部コンテナの直接的な制御: :deep(> span)セレクタを使用することで、TDesignボタンが自動的に生成する<span>要素を直接Flexコンテナとして機能させることができました。これが実際のFlexコンテキストを確立する鍵となりました。
2. Flexコンテナチェーンの確立: 最上位のFlexコンテナから.material-name要素に至るまでの全ての関連するコンテナで、display: flexやmin-width: 0といった適切なFlexboxプロパティが設定されている状態を確保しました。
3. 幅の完全な活用: 内部<span>要素にwidth: 100%を設定することで、親ボタンコンポーネントが利用できる全幅をその<span>要素が活用し、その内部のmaterial-nameが適切にFlexboxの計算を行う基盤を整えました。

まとめと学び

1. コンポーネントライブラリの内部構造: サードパーティ製コンポーネントを使用する際は、その内部DOM構造を理解することが、スタイル関連の問題を解決する上で非常に重要です。
2. Flexboxのテキスト省略表示には全体的な配慮が必要: Flexboxレイアウトでテキストを正しく省略表示させるためには、関連するFlexコンテナチェーン全体で適切なプロパティ（特にmin-width: 0）が設定されていることを確認する必要があります。
3. スタイル穿透の強力なツール: VueのScoped CSSにおける:deep()セレクタは、コンポーネントライブラリの内部要素のスタイルを調整するための不可欠なツールです。
4. 段階的な問題切り分け: 問題解決のアプローチとして、まず固定幅で基本的な機能を確認し、その後Flexbox固有の側面を段階的に検証していく手法は非常に有効です。

最終的なコード

最終的に機能した完全なCSSコードは以下の通りです。

.material-button--horizontal {
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* TDesignボタン内部のspan要素を直接ターゲット */
.material-button--horizontal :deep(> span) {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.material-button--horizontal .material-preview {
  width: 24px;
  height: 24px;
  flex-shrink: 0; /* 縮小しない */
}

.material-button--horizontal .material-name {
  flex: 1; /* 残りのスペースを埋める */
  margin: 0 6px;
  text-align: left;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* コンテンツが縮小可能 */
}