cssフォントが省略を超えています

Web 開発では、テキスト コンテンツがコンテナの範囲を超えることがよくあります。これは、ページの美しさに影響を与えるだけでなく、ユーザーの読書エクスペリエンスを低下させます。このような状況に対して、CSS はフォントの省略を超えた効果を実現するソリューションを提供します。

1. CSS の超過省略の基本原則

フォントの超過省略とは、要素内のテキスト コンテンツが要素によって割り当てられたスペースを超える場合、超過部分が省略記号 (. . .) は、テキスト コンテンツをより適切に表示するために、CSS テキスト オーバーフローが次の 3 つの属性によって実現されることを意味します:

• text-overflow: テキストが幅を超えた後のテキストの表示方法を制御するために使用されます。要素が表示されます。 ;
• white-space: テキスト内の改行とスペースを制御するために使用されます。;
• overflow: 要素のオーバーフロー コンテンツの表示方法を制御するために使用されます。

このうち、text-overflow 属性には次の値が含まれます:

• clip: デフォルトの属性値、余分なコンテンツは非表示になります;
• ellipsis: 超過するコンテンツには省略記号 (...) が表示されます。

2.省略を超えるCSSフォントの具体的な実装方法

1. 省略を超える単行テキスト

単行テキストの場合は、省略記号を超えるフォントの効果を実現するには、次のメソッドを使用します。

.overflow-text {
  white-space: nowrap; /* 禁止换行 */
  text-overflow: ellipsis; /* 超出省略 */
  overflow: hidden; /* 溢出隐藏 */
}

上記のコードを使用すると、コンテナの幅を超えるテキスト コンテンツを非表示にして、省略記号に置き換えることができます。

2. 複数行のテキストが省略を超えています

複数行のテキストの場合、最初にテキストの内容を折り返す必要があり、それから省略を超える操作が実行されます。具体的な実装コードは以下の通りです。

.overflow-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 控制显示行数 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 超出省略 */
}

このうち、 -webkit-box-orient はテキストの折り返し方向を選択するために使用され、 -webkit-line-clamp はテキストの行数を制御するために使用されます。表示し、最後にコンテナの幅を超えるコンテンツを非表示にして省略記号に置き換えます。

3. CSS フォント オーバーフロー省略の互換性の問題

text-overflow 属性は一部のブラウザでは認識されない可能性があるため、互換性処理のためにプレフィックスを付ける必要があることに注意してください。

.overflow-text {
  white-space: nowrap;
  overflow: hidden;
  /* 兼容WebKit内核浏览器 */
  text-overflow: -webkit-ellipsis;
  /* 兼容非WebKit内核浏览器 */
  text-overflow: ellipsis;
}

4. まとめ

上記の方法により、コンテナの範囲を超えたテキストの省略効果を簡単に実現し、ページをより美しく、読みやすくすることができます。実際の開発では、最良の結果を達成するために特定の値を調整し、さまざまなブラウザで正しく表示されるように互換性の問題を考慮する必要があります。

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