CSS テキストオーバーフロー: 省略記号; が機能しない? 質問する

Question

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>

役に立つ参考資料:

Answer 1