[解決済み] CSS text-overflow: ellipsis; が効かない？

質問

なぜこの簡単なCSSが機能しないのかわからない......。

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

4番目のquot;Test"あたりで切れているはずです。

解決方法は？

text-overflow:ellipsis; は、以下の場合にのみ動作します。

• 要素の幅が px (ピクセル)です。での幅 % (パーセント)では動作しません。
• 要素には、必ず overflow:hidden と white-space:nowrap を設定します。

ここで問題が発生するのは width の a 要素には制約がありません。あなたは width の設定がありますが、この要素には display:inline (つまりデフォルト) はそれを無視し、他の何もその幅を制限していません。

以下のいずれかの方法で修正できます。

• 要素に設定します。 display:inline-block または display:block (おそらく前者でしょうが、レイアウトの必要性によります)。
• そのコンテナ要素の1つを display:block で、その要素に固定された width または max-width .
• 要素に設定します。 float:left または float:right (おそらく前者でしょうが、繰り返しになりますが、省略に関してはどちらでも同じ効果が得られるはずです）。

私の提案は display:inline-block これは、レイアウトに与える影響が最小限であるためです。 display:inline CSSを理解する上で重要なことは、様々なスタイルがどのように組み合わされるかを理解することです。

以下は、あなたのコードを使ったスニペットです。 display:inline-block を追加して、どれだけ近かったかを示しています。

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

役に立つ参考文献

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space