[解決済み] フレックスボックスコンテナ内の省略記号 [重複].
2023-04-03 13:45:08
質問
Firefox Nightly の最新 (?) リリース (35.0a1) 以降、以下の問題が発生しています。
text-overflow: ellipsis
でフレックスボックス コンテナ内を
flex-direction: row
で囲まれ、各列の幅は50%である。
デモです。
.container {
width: 300px;
background: red;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.column {
flex-basis: 50%;
}
.column p {
background: gold;
/* Will not work in Firefox Nightly 35.0a1 */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<div class="container">
<div class="row">
<div class="column">
<p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p>
</div>
<div class="column">
<p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p>
</div>
</div>
</div>
Nightly では、テキストはコンテナの外側に漏れ、コンテナ内にある
...
を付加しません。Chrome と Firefox Stable では、意図したとおりに動作します。
どのように解決するのですか?
これは最終的に、Firefox Nightly の最近の変更に突き止められました。長い話を端折ると、設定
min-width: 0
を
.column
を追加すると、期待通りに動作するようになります。
より包括的な回答があります。 をご覧ください。 . 注目すべきは
基本的に: フレックス アイテムは、明示的に "min-width" または "width" または "max-width" を指定しない限り、固有の最小幅以下に縮小することを拒否されます。
作業ソリューションです。
.container {
width: 300px;
background: red;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.column {
/* This will make it work in Firefox >= 35.0a1 */
min-width: 0;
flex-basis: 50%;
}
.column p {
background: gold;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<div class="container">
<div class="row">
<div class="column">
<p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p>
</div>
<div class="column">
<p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p>
</div>
</div>
</div>
関連
-
[css3]css3によるフレックスレイアウト幅の解決方法が有効でない件
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] フレックスボックスのアイテム間の距離を設定するためのより良い方法
-
[解決済み] CSS Flexboxで、"justify-items "と "justify-self "プロパティはなぜないのですか?
-
[解決済み] Flexbox:水平方向と垂直方向の中央揃え
-
[解決済み] 位置は固定だが、容器に対して相対的
-
[解決済み] Flexboxの子の高さを親の高さの100%にするには?
-
[解決済み] CSS text-overflow: ellipsis; が効かない?
-
[解決済み] [Solved] divをコンテナの一番下に配置するには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSレイアウト例】float(フロート)、position(ポジション)プロパティの差分によるCSSレイアウト
-
[CSSチュートリアル]CSSは、2列のレイアウト、固定幅の左側、適応するためのさまざまな方法の右側を達成するために
-
[CSSチュートリアル】height:100%と書いても効かない理由
-
[CSSチュートリアル]css display table adaptive height, widthの問題解決
-
[CSSチュートリアル】CSSもこんな風に遊べる?気まぐれグラデーションの極意
-
[CSSチュートリアル】クールなネオン効果を実現するピュアCSS(デモあり)
-
[CSSチュートリアル】タイトルを上部に配置するスティッキーレイアウトを実現するためのCSS
-
[CSSチュートリアル]CSS気まぐれボーダーアニメーション効果
-
[CSSチュートリアル】ピュアCSSでDIVホバーを実現するサンプルコード(固定位置編)
-
[css3]スクロールバー美化効果を実現するcss3サンプルコード