CSS で非表示にする以外に省略記号効果を実現する方法

Web ページのレイアウトでは、特定の要素の幅や高さを制限する必要があることがよくありますが、幅や高さが制限を超えた場合に、テキストの内容をどのように表示するかは非常に重要です。通常、CSS の overflow:hidden 属性を使用して、要素コンテンツの表示を制限できます。ただし、コンテンツを非表示にすると、重要な情報が省略される可能性があり、ユーザーにとって不親切です。したがって、CSS の省略記号オプションを使用して、テキスト コンテンツが省略されていることをユーザーに知らせる必要があります。

通常の状況では、テキスト コンテンツが制限を超えると、ブラウザのデフォルトの処理方法では、余分なテキストが切り詰められて非表示になります。ただし、場合によっては、一部のコンテンツが制限を超えていることをユーザーに伝えるために省略記号を表示する必要があります。省略されました。現時点では、CSS の text-overflow プロパティを通じてこれを実現できます。

CSS プロパティ text-overflow は、テキストが含まれている要素からオーバーフローした場合に、省略記号を表示する方法を指定するために使用されます。 text-overflow 属性には、clip、ellipsis、string の 3 つの値があります。

1. クリップ値は、テキストがオーバーフローした場合に、テキストを超えたコンテンツが非表示になり、省略記号が表示されないことを示します。
2. 省略記号の値は、テキストがオーバーフローした場合に、テキストを超えたコンテンツが非表示になり、テキストの最後に省略記号が表示されることを示します。
3. 文字列値は、テキストがオーバーフローした場合に、テキストの外側のコンテンツを非表示にし、指定された文字列をテキストの最後に表示することを意味します。たとえば、値を「...」に設定すると、テキストの最後に 3 つのドットが表示され、一部のコンテンツが省略されていることを示します。

text-overflow 属性は、overflow:hidden 属性およびwhite-space:nowrap 属性と一緒に使用する必要があります。このうち、white-space:nowrap はテキストを折り返すことができず、1 行でのみ表示できることを示します。 overflow:hidden は、テキストがオーバーフローした場合に、余分な部分が非表示になることを示します。

以下は例で、div 要素の幅を 100px、高さを 50px に設定し、テキストの内容は超長文とします。テキストがオーバーフローする場合、CSS の text-overflow:ellipsis プロパティを使用して省略記号を表示します。

<div class="text-overflow">这是一个超长的文本，它将会在这个div中被限制宽度和高度。</div>

.text-overflow {
  width: 100px;
  height: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

上記のコードでは、要素の幅と高さを制限し、テキストを超えた部分は表示されます。隠される。同時にテキストを折り返さないように設定し、1 行で表示できるようにします。最後に、text-overflow:ellipsis 属性を使用して省略記号を表示します。

概要

CSS の非表示を超えた属性と省略記号属性は、Web ページ レイアウトで一般的に使用される手法であり、要素の幅または高さを効果的に制限し、テキストがオーバーフローした場合に省略記号を表示することで、ユーザーが一部の情報が省略されていることに注意してください。省略記号表示効果を正しく実装するには、text-overflow 属性を overflow:hidden 属性およびwhite-space:nowrap 属性と一緒に使用する必要があります。

この記事がお役に立てば幸いです。読んでいただきありがとうございます。

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