CSSで複数行の余分な部分を楕円として表示する方法

CSSで複数行の文字列が出現する場合、余分な部分が正常に表示されないという問題がよく発生します。現時点では、楕円を使用してこの問題を解決できます。

具体的な操作方法は次のとおりです。

1. まず、テキストの幅が制限されたコンテナを設定する必要があります。例:

<div class="text-container">
  这是一段需要进行多行省略号处理的文本内容
</div>

2. 次に、幅、フォント サイズ、行の高さ、その他の属性を含むテキスト コンテナーのスタイルを CSS で設定します:

.text-container {
  width: 300px;
  font-size: 16px;
  line-height: 1.5;
}

3. 次に、省略記号を実現できます。 CSS の text-overflow 属性による効果。このプロパティには、クリップ、省略記号、文字列の 3 つの値があります。このうち、clip は省略記号を表示しないことを意味し、string は指定した文字列を省略記号として表示することを意味します。複数行のテキストが省略された場合、通常は省略記号を使用して値を取得します。同時に、コンテナの幅を超えた後にテキストが自動的に折り返されるように、空白を通常または通常の折り込みに設定する必要もあります。

.text-container {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;  /* 控制行数 */
  -webkit-box-orient: vertical;
}

4. 上記のコードでは、 -webkit-line-clamp プロパティと -webkit-box-orient プロパティを使用して、テキスト行の数と方向を制御します。このうち、-webkit-line-clamp 属性は表示するテキストの行数を制御するために使用され、この例では最大 3 行まで表示するように設定しています。 -webkit-box-orient 属性はフレキシブルボックスの子要素の配置を定義する属性で、ここでは縦配置に設定しています。

これで、CSS 複数行省略記号の効果が完了しました。一般に、注意すべき重要なことは、テキスト コンテナの幅を設定し、適切な行数と省略記号のスタイルを設定することです。同時に、text-overflow 属性を使用してテキストの余分な部分の省略記号スタイルを制御し、より良い結果を実現します。

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