1. ホーム
  2. css

[解決済み] フレックスボックスコンテナ内の省略記号 [重複].

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>