CSS が長すぎるテキストを実装しているため、表示が省略されています

1. 一行省略表示

CSSでは、text-overflowプロパティとwhite-spaceプロパティを使用して、長すぎるテキストの省略表示を実現できます。その方法は次のとおりです。

1. コンテナの境界を越えるテキストを非表示にするには、オーバーフローを非表示に設定します。

2. ホワイトスペースをnowrapに設定すると、テキストが同じ行に表示されます。

3. 省略記号を表示するには、text-overflow を ellipsis に設定します。

コードは以下のように表示されます:

.ellipsis {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

このコードは、コンテナの幅が制限されている場合に使用され、コンテナの幅を超えるテキストは非表示になり、省略記号が表示されます。

2. 複数行省略表示

複数の行を省略する必要がある場合は、オーバーフローを非表示に、空白を通常に設定し、max-height 属性を使用してコンテナの高さを制限できます。

コードは以下のように表示されます:

.ellipsis-multi-line {
   overflow: hidden;
   white-space: normal;
   text-overflow: ellipsis;
   max-height: 60px; /* 设置最大高度 */
}

このコードでは、テキストコンテンツの高さが 60px を超える場合、超過部分は非表示になり、省略記号が表示されます。