Flexbox内のテキストを一行表示にして余った文字を省略表示する方法

flexbox内のテキストを一行表示にして、横幅を縮めたときに余った文字を省略表示する方法を紹介します。

成功

通常は簡単に実装できるのですが、テキストが子要素の中に入っていると上手く動作しません。

失敗

デモページの横幅を縮めると、サンプルの動作を確認できます。

サンプル1(簡単なパターン)

テキストを一行表示にして、横幅を縮めたときに余った文字を省略表示するのは簡単です。

一行表示したい要素に以下のCSSを適用するだけです。

HTML

CSS

成功

サンプル2(NGパターン)

問題は、以下のように.flexitemの要素の中に、さらに子要素(ここでは<h3>)があるときです。

HTML

このときに、<h3>に先ほどと同じ一行表示のCSSを適用してみます。

CSS

しかし、横幅を縮めてみても、文字は省略表示されず、要素が横からはみ出てしまいます。

失敗

サンプル3(OKパターン1)

.flexitemの子要素(<h3>)のテキストを一行表示するためには、.flexitemに「min-width: 0;」を適用します。

HTML

CSS

.flexitemに「min-width: 0;」適用したことで、子要素(<h3>)内の余った文字が省略表示されるようになりました。

成功

サンプル4(OKパターン2)

サンプル3以外の方法として、.flexitemに「overflow: hidden;」を適用することでも、子要素(<h3>)内の余った文字を省略表示することができます。

HTML

CSS

.flexitemに「overflow: hidden;」適用したことで、子要素(<h3>)内の余った文字が省略表示されるようになりました。

成功

スポンサーリンク

参考

スポンサーリンク

みんなが見ている記事

1 Comments

  1. Pingback: flexbox内でtext-overflowが効かない | cly7796.net

コメントを投稿する

  • Posted on 2016.05.17
  • Views 1,026