CSS でテキスト オーバーフローの省略記号 (\"...\") を実装するにはどうすればよいですか?

CSS でテキスト オーバーフローの省略記号 ("...") を表示する方法

利用可能なスペースを超えるテキストを扱う場合は、一般にビジュアルが必要になります。さらに多くのコンテンツが利用可能であることを示すインジケーター。これは、CSS を使用してspan 要素にドット (省略記号) を表示することで実現できます。

この機能を有効にするには、次の手順に従います。

1. オーバーフローが非表示になっていることを確認します。
   オーバーフローを使用します: hidden ! important;
2. テキスト オーバーフローを使用:
   テキスト オーバーフローの省略記号を追加します。
3. オプション: 空白コントロール:
   行の折り返しを防止し、省略記号が最後の文字の後に表示されることを確認し、white-space: nowrap; を設定します。

コード例は次のとおりです:

<code class="css">span {
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}</code>

<code class="html"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span></code>

これらの CSS プロパティを実装することで、非表示のオーバーフローを使用して、span 要素に省略記号を効果的に表示して、表示範囲を超えて利用可能なテキストがあることを示すことができます。

以上がCSS でテキスト オーバーフローの省略記号 (\"...\") を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。