複数行のテキストを切り詰める：実用的な CSS 技術

はじめに

この実験では、コンテナの寸法を超える複数行のテキストを切り詰める方法を学びます。この技術は、クリーンで整理されたデザインを維持しながら、長いテキストの抜粋を表示するのに役立ちます。overflow、height、background などの CSS プロパティを使用することで、視覚的に魅力的な切り詰め効果を作成して、ユーザーエクスペリエンスを向上させることができます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 93%です。学習者から 89% の好評価を得ています。

複数行のテキストを切り詰める

VM には既に index.html と style.css が用意されています。

1 行より長いテキストを切り詰めるには、次の手順に従います。

overflow: hidden を使用して、テキストがその寸法を超えないようにします。
要素が少なくとも 1 つの一定の寸法を持つように、固定幅 400px を設定します。
font-size から計算される height: 109.2px を設定します。計算式は font-size * line-height * numberOfLines です（この場合 26 * 1.4 * 3 = 109.2）。
HTML の p 要素に truncate-text-multiline クラスを追加します。
CSS の .truncate-text-multiline クラスに対して、font-size: 26px と line-height: 1.4 を設定します。
テキストのスタイルを設定するために、color: #333 と background: #f5f6f9 を設定します。
transparent から background-color に向かうグラデーションを作成するには、.truncate-text-multiline::after 疑似要素に次の CSS ルールを追加します。

.truncate-text-multiline::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: 36.4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
}

これにより、グラデーションコンテナが作成されます。このコンテナの高さは 36.4px で、計算式は font-size * line-height です（この場合 26 * 1.4 = 36.4）。::after 疑似要素は .truncate-text-multiline 要素の右下隅に配置されます。

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！複数行のテキストを切り詰める実験を完了しました。技術を向上させるために、LabEx でさらに実験を行って練習してください。