テキスト オーバーフロー省略記号が機能しないのはなぜですか?

テキスト オーバーフロー省略記号が機能しない

テキスト オーバーフロー プロパティは、表示されているテキストを切り詰めて省略記号 (...) を追加することを目的としています。全文が表示されないことを示します。ただし、このプロパティが期待どおりに機能しない場合は、いくつかの重要な CSS プロパティが適切に配置されていることを確認することが重要です。

必須 CSS プロパティ:

text-overflow: 省略記号効果、次の CSS プロパティが必要です定義:

• 表示: テキストが画面上のスペースを占めるようにするには、表示プロパティを「block」または「inline-block」に設定します。
• White-Space: テキストが複数に折り返されるのを防ぐには、white-space: nowrap を使用します。行。
• オーバーフロー: コンテナの幅を超えるテキストの部分を非表示にするには、オーバーフローを「非表示」に設定します。
• 幅 (または Max-Width) ): 固定幅 (または最大幅) を指定して、 text.

正しいコードのデモ:

次の CSS スニペットは、必要なプロパティを正しく適用する方法を示しています:

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden;
}

例:

<span>Test test test test test test</span>

実装することによりこれらのプロパティを使用すると、コンテナの幅が狭すぎてテキスト全体を収容できない場合に、指定したテキストが切り詰められ、省略記号が表示されるようにすることができます。

以上がテキスト オーバーフロー省略記号が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。