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

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

Barbara Streisand
Barbara Streisandオリジナル
2024-11-10 03:47:02195ブラウズ

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 までご連絡ください。