テキストのオーバーフロー時にテキストを折り返す方法:省略記号やフェードなどの使用例

2024-02-08 05:30 CSS省略記号
  1. 省略記号 (...) を使用する方法: テキストが親要素からはみ出した場合、テキストの末尾に省略記号を追加して示す方法です。CSSの text-overflow プロパティを使用します。
.overflow-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
  1. フェード効果を使用する方法: テキストが親要素からはみ出した場合、テキストをフェードアウトさせることで示す方法です。CSSの linear-gradient を使用します。
.fade-text {
  display: inline-block;
  width: 200px; /* 親要素の幅に合わせて調整 */
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%);
}

これらの方法を使用することで、テキストが親要素からはみ出した場合でも、適切に表示することができます。選択する方法はデザインやコンテンツの要件によって異なる場合があります。