省略記号以外の CSS3 ヒントの詳細

CSS3 の text-overflow プロパティは、要素のテキスト コンテンツがコンテナのサイズを超えた場合に、要素のテキスト コンテンツがどのように表示されるかを制御できる非常に便利な機能です。デフォルトでは、コンテナの外側のテキストは省略記号 (...) に置き換えられます。この記事では、省略記号以外の CSS3 のトリックと使用法のいくつかを詳しく説明します。

基本的な使い方

まず、text-overflow 属性の基本的な使い方を見てみましょう。オプションの値は 3 つあります。

• clip: 省略記号を表示せずに、コンテナを越えてテキストをクリップします。
• ellipsis: コンテナの末尾に省略記号を表示します。 (デフォルト)
• string: 指定された文字列をコンテナの最後に表示します。

これは、コンテナの最後に省略記号を表示する方法を示す簡単な例です:

div {
  width: 200px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

これは、200 ピクセル幅の div にテキスト行を表示します。テキストがコンテナのサイズを超えると、テキストは切り取られ、省略記号に置き換えられます。

疑似要素の前後に省略記号を追加します。

スタイル属性 text-overflow を使用して、テキストが省略記号を超えていることを確認します。通常、省略記号はコンテナーの最後に追加されます。 。この解決策は最も単純ですが、最も一般的なアプローチでもあります。もっとハイライトを作りたいのであれば、より革新的なアプローチを考える必要があります。

CSS 疑似要素 :before または :after を使用すると、省略記号を簡単に追加できます。この方法では、通常、特別な効果 (例: 省略記号テキストを左揃え) を実現できます。スタイルを追加すると、擬似要素の表示方法を制御したり、元のテキストの表示をオーバーライドしたりできます。

次のコードは、コンテナの右側に省略記号を追加する方法を示しています。

div {
  position: relative;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
}

div:before {
  content: "...";
  position: absolute;
  right: 0;
  top: 0;
  background-color: #fff;
  padding: 0 2px;
}

これにより、コンテナの右側に省略記号が追加されます。絶対配置を使用して疑似要素をコンテナの右上隅に配置し、楕円が完全に見えるように白い背景とパディングを追加しました。

CSS3 calc() 関数を使用して、楕円に使用できるスペースを制御する

CSS3 の calc() 関数を使用すると、CSS で数式を使用できるようになり、サイズを動的に計算するのに非常に役立ちますまたは間隔。省略記号を超える場合は、calc() 関数を使用して利用可能なスペースを制御し、テキストと省略記号が完全に表示されるようにすることができます。

次のコードは、幅 300 ピクセルのコンテナーにテキストと省略記号を表示する方法を示しています。

div {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div span {
  position: relative;
  display: inline-block;
  max-width: calc(100% - 20px); /* 容器宽度-省略号的宽度 */
  vertical-align: top;
}

div span:after {
  content: '...';
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 100%;
  text-align: center;
  background-color: #fff; /* 背景色和容器一致 */
}

上記のコードでは、calc() 関数とspan という 2 つの主要なスタイルを使用しています。要素。 Span 要素は inline-block に設定されており、他の要素のレンダリングに影響を与えることなく、テキストが単独で 1 行を占めることができます。 max-width 属性を使用して、span 要素の最大幅をコンテナの幅から省略記号の幅を引いた値に設定します。これにより、テキストがコンテナの使用可能なスペースを超えないようになります。

CSS3 Flexbox の使用

CSS3 の Flexbox レイアウトは非常に便利で、CSS を使用して柔軟で応答性の高いレイアウトを作成できます。コンテナ内に複数行のテキストを表示する必要があり、最後の行に楕円を追加したい場合は、Flexbox レイアウトを使用するのが良い選択です。

次のコードは、Flexbox レイアウトを使用して幅 300 ピクセルのコンテナに複数行のテキストを表示し、最後の行に省略記号を追加する方法を示しています。

div {
  display: flex;
  flex-direction: column;
  height: 80px;
  width: 300px;
  overflow: hidden;
}

div p {
  flex: 1;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

div p:last-child {
  overflow: visible; /* 显示容器溢出的文本 */
  text-overflow: '';
  white-space: normal;
}

上記のコードでは、私たちが使用するのは、display: flex、flex-direction: column、flex: 1 の 3 つの主要なスタイル属性です。 Flex コンテナは flex-direction: column に設定されているため、子要素は垂直に配置されます。各段落要素は flex: 1 に設定され、コンテナーの高さ全体を占めるようになります。

最後の段落要素は overflow:visible に設定されているため、コンテナからオーバーフローしてすべてのテキストが表示されます。また、テキストが省略記号に切り取られないように、text-overflow プロパティを空の文字列に設定します。こうすることで、最後の段落要素のテキストがコンテナの最終行で自然にオーバーフローし、Flexbox レイアウトによって最後の行に省略記号が自動的に追加されます。

概要

この記事では、楕円以外の CSS3 のいくつかのテクニックと使用方法を検討しました。基本的な text-overflow プロパティに加えて、疑似要素と CSS3 calc() 関数を使用して、より創造的な効果を実現する方法も示します。また、CSS3 Flexbox レイアウトを使用して複数行のテキストを表示し、省略記号を追加する方法についても説明しました。どのテクノロジを使用する場合でも、テキストを表示するときは必ずベスト プラクティスを使用してください。これにより、さまざまなコンテキストでテキストが適切に表示されます。

以上が省略記号以外の CSS3 ヒントの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。