[CSS]フレックスボックスと切り詰められたテキスト（译）_html/css_WEB-ITnose

原文:

Flexbox and Truncated Text

翻訳: Flexbox はラップされたテキストに遭遇します

このような状況に遭遇したとき: flex の子要素に 1 行のテキストがあり、テキストを自動的に行を折り返す、省略記号で行を区切る (または残りを非表示にする) ことは望ましくありません。しかし、予想外に、レイアウトが切り詰められ、flex 親要素全体の幅が強制的に広くなります。フレックスボックスでレイアウトが簡単に！

フレックスボックス以外のプロパティ値を使用して実行できる標準的なソリューションがあります。

私たちが望む効果は次のようなものです

このアニメーションは、子要素が絞り込まれていることを示しています。

あなたが遭遇する問題は次のとおりです

このアニメーションは、テキストを折り返さないと縮小が妨げられることを示しています。

子要素の問題

不可解なのは、テキストが flex 子要素の中に直接あれば問題ないということです: HTML コード:

<divclass="flex-parent">  <divclass="flex-child">Textto truncatehere.  </div>  <divclass="flex-child">Otherstuff.  </div></div> 

CSS コード:

/* 文本直接在子元素中，在这里换行 */.flex-child  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;} 

子要素に遭遇すると、問題になります:

HTML コード:

<divclass="flex-parent">  <divclass="flex-child"><h2>Textto truncatehere.</h2>  </div>  <divclass="flex-child">Otherstuff.  </div></div> 

CSS コード:

/* 标题文本的时候，可以截断文本 */.flex-child > h2 {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;} 

解決策: flex 子要素の min-width を 0

に設定するか、min-width を他の特定の値に変更します。そうしないと、他のテキスト要素を含む flex の子によって、それらのテキスト要素の「暗黙の幅」が狭くなりません。

私が最初にこの状況に遭遇したとき、AJ Foster 氏が書いた解決策を見つけました。

仕様草案によれば、フレックス コンテナが縮小されたときに上記のテキストが完全に折りたたまれないようにする必要があります。サブタイトルの幅はすでに 100% であるため、min-width: auto は、フレックスボックスによってコンテナーが希望よりも大きくなることが計算されます。

この機能は Chrome、Opera、Firefox で利用できることがわかりました。 Safari は、min-width が設定されていない場合でも縮小したり切り詰められます (おそらく仕様に違反します)。

デモ

Codepen のデモ アドレス: http://codepen.io/chriscoyier/pen/zqedEr

1. 有効: テキスト ボックスは flex 子要素内に直接あります
2. 無効: テキスト ボックスは h2 In 内にあります。 flex 子要素;
3. 効果: テキスト ボックスは h2 にありますが、flex 子要素には min-width が設定されています。