css3の隠し機能を超えた設定方法

CSS3 は、最新の Web 開発に不可欠な部分です。 Web サイトの可視性、対話性、アクセシビリティを向上させるためのさまざまなツールとテクニックを開発者に提供します。そのうちの 1 つは、この記事で詳しく説明する Beyond Hidden 機能です。

隠した先には何があるのでしょうか?

非表示を超えた機能は、CSS3 の非常に便利な機能です。通常、テキスト コンテンツがコンテナのサイズを超える場合、超過部分は自動的に切り捨てられます。ただし、これらの余分なコンテンツを非表示にしたい場合は、余分な非表示機能を使用できます。

CSS では、さまざまな属性値を設定することで、さまざまなタイプのオーバーフロー非表示を実現できます。

1. overflow:hidden: この属性は、コンテナを超えた部分を非表示にするために使用できます。テキストの内容が切り詰められ、余分な部分が非表示になります。
2. text-overflow:ellipsis: この属性は、コンテナの外にあるテキスト コンテンツを省略記号として表示できます。
3. white-space:nowrap: この属性は、テキスト コンテンツを折り返さずに同じ行に表示するように強制できます。コンテンツがコンテナーのサイズを超えると、コンテンツは非表示になります。

Beyond Hide の使用方法?

非表示を超えた機能の使用は非常に簡単です。理解を助けるために、いくつかの例を次に示します。

非表示の例 1 を超えて:

まず、単純な div コンテナを定義し、それにテキスト コンテンツを追加します:

<div class="container">
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
</div>

次に、overflow:hidden を使用して、コンテナを超えるテキストの部分を非表示にします。

.container {
    width: 200px;
    height: 50px;
    background-color: #ccc;
    overflow: hidden;
}

上記のコードでは、div コンテナの幅は 200 ピクセル、高さは 50 ピクセルです。テキストの内容が大きく、コンテナの幅と高さを超えています。ただし、overflow:hidden 属性を使用しているため、余分なコンテンツは単純に非表示になります。

オーバーハイドの例 2:

次の例では、text-overflow:clip の代わりに text-overflow:ellipsis を使用します。

<div class="container">
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
</div>

.container {
    width: 200px;
    height: 50px;
    background-color: #ccc;
    white-space: nowrap;
    overflow:hidden;
}

p {
    text-overflow: ellipsis;
}

この例では、空白を使用します。 :nowrap テキストの折り返しを防止します。また、overflow:hidden 属性を使用して余分な部分を非表示にし、text-overflow:ellipsis を使用して余分な部分を省略記号として表示します。

概要

Beyond-hiding 関数は、CSS3 の実用的な関数です。これにより、コンテナの外側にテキスト コンテンツが非表示になり、ページがより明確で読みやすくなります。上記の例は、CSS3 の隠された機能を簡単に紹介したものにすぎません。より複雑なスタイルや効果が必要な場合は、CSS3 を深く学習し、さらに多くのヒントやテクニックを習得してください。

以上がcss3の隠し機能を超えた設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。