「text-overflow: ellipsis」が Span 要素で機能しないのはなぜですか?

「text-overflow: ellipsis」が機能しない

「text-overflow: ellipsis」を使用して < 内のテキストを切り詰めようとすると;スパン>

解決策

「text-overflow: ellipsis」機能を有効にするには、次の CSS プロパティに加えて"text-overflow":

• Overflow: 要素のコンテンツがそれを含む領域を超え、非表示になっていないことを確認します
• Width (または max-width) ): テキストが配置される要素の最大幅を定義しますcontains
• Display: 要素の表示タイプ (ブロック、インラインブロックなど) を指定します
• White-space: スペースの配置を制御します要素内で処理されます

例コード

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

説明

この例では、要素には 100px の幅が与えられ、オーバーフロー プロパティは「hidden」に設定され、余分なコンテンツが要素の境界内に確実に隠されるようにします。表示プロパティは「block」に設定され、要素が四角形のスペースを占めるように強制されます。最後に、テキスト内の改行を防ぐために、空白プロパティが「nowrap」に設定されます。

これらのプロパティを適用すると、「text-overflow: ellipsis」プロパティが機能し、< 内のテキストが切り捨てられます。 ;スパン>要素の幅を超えるテキストがウィンドウ サイズに縮小される場合は、省略記号 (...) を追加します。

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