CSSを使用して表示省略記号を超える効果を実現する方法

CSS の省略記号の超過とは、要素内のテキストがそのコンテナーの幅または高さを超える場合に、CSS プロパティ設定を通じてテキスト コンテンツを省略記号の形式で表示する方法を指します。

通常の状況では、テキストがオーバーフローすると、ブラウザはテキストを自動的に次の行に移動して表示します。ただし、場合によっては、特にモバイル デザインやレスポンシブ デザインでは、テキスト コンテンツを 1 行で表示し、テキストがコンテナの幅を超える場合は省略記号の形式で表示したいことがあります。

CSS のBeyond-省略属性は、この効果を実現するのに役立ちます。 CSS でよく使用される 2 つのオーバーフロー属性と省略属性、テキスト オーバーフローとホワイトスペースを次に示します。

1. text-overflow

text-overflow は CSS3 の新しい属性で、テキストがコンテナからオーバーフローした場合の処理​​方法を設定するために使用されます。この属性の値は次のとおりです。

• clip: テキストはコンテナからオーバーフローした直後に切り詰められます。
• ellipsis: テキストはコンテナからはみ出した後、省略記号の形式で表示されます。
• string: テキストがコンテナーからオーバーフローした場合、指定された文字列を使用してデフォルトの省略記号を置き換えます。

text-overflow を使用する場合は、通常、次のように、overflow:hidden とwhite-space:nowrap を設定して、1 行に表示されるコンテンツを制限する必要があります。

white-space

2. white-space 属性は、要素内で空白文字 (スペース、復帰など) を処理する方法を設定するために使用されます。この属性の値は次のとおりです。

normal: デフォルト値。要素内に複数の連続する空白文字がある場合、空白は 1 つだけ表示されます。

• nowrap: テキストの折り返しを許可せず、テキストを強制的に同じ行に表示します。
• 前: 空白文字を保持し、テキスト表示はソース ファイルと同じになります。
• pre-wrap: 空白文字を保持し、テキストを折り返すことができます。
• pre-line: 複数の連続する空白文字を結合し、テキストを折り返すことができます。
• ホワイトスペース属性を使用してオーバーフローの省略を実現する場合、次のコードに示すように、ホワイトスペースの値をnowrapに設定し、オーバーフローの値をhiddenに設定する必要があります。

div {
    width: 200px;
    height: 30px;
    background-color: #f3f3f3;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

注意が必要ですが、残念ながら、white-space 属性を使用すると要素全体内のテキストの表示に影響するため、text-overflow 属性と組み合わせて使用​​する必要があります。

概要

CSS で text-overflow 属性と White-space 属性を使用すると、特殊な場合にテキストの過剰な省略を容易に実現できます。もちろん、実際のプロジェクトに適用する場合には、実情に応じて調整してください。

以上がCSSを使用して表示省略記号を超える効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。