ホームページ > ウェブフロントエンド > CSSチュートリアル > 「text-overflow: ellipsis」が機能しないのはなぜですか?

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

Barbara Streisand
リリース: 2024-11-10 03:47:02
オリジナル
291 人が閲覧しました

Why isn't my

「text-overflow: ellipsis」の問題のトラブルシューティング

「text-overflow: ellipsis」の使用は、要素内のテキストを切り詰めることを目的としています, テキストが指定された制限に達すると「...」が表示されます。ただし、場合によっては、この機能が期待どおりに動作しない可能性があります。

この例では、「text-overflow: ellipsis」が期待どおりの効果を発揮していないように見えます。この問題を解決するには、関連するスタイルが正しく適用されていることを確認してください。 「text-overflow: ellipsis」に加えて、CSS には次のプロパティを含める必要があります:

1。オーバーフロー:

overflow: hidden;
ログイン後にコピー

2.幅または最大幅:

width: [desired width];
max-width: [maximum width];
ログイン後にコピー

3.表示:

display: block;
ログイン後にコピー

4.ホワイトスペース:

white-space: nowrap;
ログイン後にコピー

これらすべてのプロパティを組み込んだ包括的な CSS スニペットを以下に示します。

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}
ログイン後にコピー

これらのスタイルを適用すると、「span」要素が縮小されます。ウィンドウが小さくなると幅が狭くなり、省略記号でテキストが切り詰められます。これがどのように機能するかを示す例を次に示します。

HTML:

<span>Test test test test test test</span>
ログイン後にコピー

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート