CSS `text-overflow: ellipsis;` が機能しないのはなぜですか?

CSS テキスト オーバーフロー: 省略記号;動作しない場合?

CSS プロパティ「text-overflow: ellipsis;」文字列の長さが使用可能なスペースを超える場合に文字列を切り捨て、切り捨てられた部分を省略記号 (...) 記号に置き換えます。ただし、常に期待どおりに動作するとは限りません。

機能の条件:

「text-overflow: ellipsis;」の場合正しく機能するには、次の条件を満たす必要があります:

• ピクセル制限された幅: 要素の幅はピクセル (px) で指定する必要があります。幅をパーセンテージ (%) で表すと、省略記号効果は有効になりません。
• 制約されたオーバーフローと空白: 要素には、「overflow: hidden」と「white-space: nowrap」の両方が必要です。 " 設定します。

問題:

提供されたコードでは、「a」要素の幅が制限されていないために問題が発生します。幅は定義されていますが、要素はデフォルトで「display: inline」に設定されており、指定された幅を超えて拡張できます。

これを解決するには、次のいずれかを使用して要素の幅を制限する必要があります。メソッド:

• Set Display: 表示プロパティを「display: inline-block」または「display:」に変更します。
• Constrain Container Element: のコンテナ要素の 1 つに「display: block」と固定幅または最大幅を指定します。 「a」要素。
• 要素を浮動小数点にします: 「float: left」または「float:」を適用します。

推奨される解決策は、現在のレイアウトへの潜在的な影響を最小限に抑えるため、表示プロパティを "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;
}

以上がCSS `text-overflow: ellipsis;` が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。