CSSで2行を超えて楕円を表示する方法

CSS では、text-overflow 属性を使用して、テキスト コンテンツが指定された領域を超える場合に省略記号効果を表示し、ページをより美しくすることができます。以下は詳細な紹介です:

1. text-overflow プロパティ

CSS の text-overflow プロパティは、要素のコンテンツがオーバーフローした場合の動作を設定するために使用されます。その箱。共通の値は 3 つあります。

• clip: 要素の幅に合わせてテキストをクリップします。コンテンツの背後にあるテキストをブロックし、省略記号を表示しません。
• 省略記号: 切り取られたテキストを示す省略記号 (...) を表示します。
• string: 省略記号文字を指定された文字列に変更します。

次の例では、テキストが親コンテナからオーバーフローする場合、コンテンツを省略するために省略記号が使用されていることがわかります。

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

white-space 属性は、要素内の空白スペースの処理方法を指定するために使用され、nowrap はテキストが折り返されないことを意味します。 overflow 属性は要素の内容がオーバーフローした場合の処理​​方法を指定するために使用され、hidden はオーバーフローした内容が非表示になることを意味します。

2. max-height 属性と組み合わせる

要素内のテキストが多すぎる場合は、高さを設定してテキストの表示行数を制限する必要があります高さを制限する場合は、テキストを使用してください。 -overflow 属性を使用しても省略記号が表示されない場合があります。

その理由は、テキスト オーバーフローは固定幅のブロック レベル要素でのみ機能するためです。したがって、この問題を解決するには、max-height 属性を組み合わせる必要があります。

次の例では、要素の最大高さを 3 行に設定しています。テキストが 3 行を超える場合は、省略記号を使用して内容を省略します。

div {
  width: 150px;
  max-height: 3em;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

このうち、-webkit-line-clamp 属性はテキストの行数を指定するために使用され、-webkit-box-orient 属性はテキストの方向を指定するために使用され、vertical はテキストの方向を指定するために使用されます。テキストが縦に配置されます。

3. JavaScript と組み合わせる

上記のメソッドはすべて CSS スタイルの実装に基づいています。記事の内容を動的に表示したい場合は、JavaScript と組み合わせる必要があります。 JavaScript。

要素の実際の高さとコンテンツの実際の高さを計算して、省略記号を表示する必要があるかどうかを判断します。以下は簡単な例です:

var element = document.querySelector('.element');
var contentHeight = element.scrollHeight;
var elementHeight = parseInt(getComputedStyle(element).height);

if (contentHeight > elementHeight) {
  element.addEventListener('click', function() {
    this.classList.toggle('expand');
  });
}

この例では、まず要素コンテンツの高さと要素の実際の高さを取得します。コンテンツの高さが要素の高さより大きい場合は、クリックを追加します。 CSS スタイルを介して要素にイベントを追加する テキスト コンテンツを表示または非表示にします。

4. その他の注意事項

   • text-overflow プロパティは、幅が定義された単一行要素またはブロックレベル要素にのみ適用されます。
   • text-overflow 属性を使用する場合、white-space 属性は nowrap である必要があります。
   • max-height 属性と組み合わせる場合は、white-space 属性を通常にし、-webkit-line-clamp 属性を使用して行数を指定する必要があります。
   • ブラウザによって text-overflow 属性のサポートが異なる場合があるため、注意して使用してください。

一般に、text-overflow 属性を使用すると、ページがより美しくなり、記事のコンテンツがより適切に表示されます。この記事がお役に立てば幸いです。

以上がCSSで2行を超えて楕円を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。