はじめに
この実験では、CSS を使って複数行のテキストを指定された行数にトリミングする方法を探ります。-webkit-line-clamp プロパティやその他の関連する CSS プロパティを使うことで、ブロック内のテキストの表示行数を効果的に制限でき、視覚的に魅力的で読みやすくなります。この実験を通じて、あなたはウェブデザインプロジェクトでこの技術を実装する方法を学びます。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。
複数行のテキストをトリミングする
コードは
index.htmlとstyle.cssに記述できます。
与えられた行数に複数行のテキストを制限します。
-webkit-line-clampを使用して表示する最大行数を設定します。-webkit-line-clampを適用するために必要なdisplayを-webkit-boxに、-webkit-box-orientをverticalに設定します。- テキストがトリミングされた後のオーバーフローを非表示にするために
overflow: hiddenを適用します。
<p class="excerpt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod enim
eget ultricies sollicitudin. Nunc aliquam arcu arcu, non suscipit metus luctus
id. Aliquam sodales turpis ipsum, in vehicula dui tempor sit amet. Nullam quis
urna erat. Pellentesque mattis dolor purus. Aliquam nisl urna, tempor a
euismod a, placerat in mauris. Phasellus neque quam, dapibus quis nunc at,
feugiat suscipit tortor. Duis vel posuere dolor. Phasellus risus erat,
lobortis et mi vel, viverra faucibus lectus. Etiam ut posuere sapien. Nulla
ultrices dui turpis, interdum consectetur urna tempus at.
</p>
.excerpt {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
まとめ
おめでとうございます！あなたは「複数行のテキストをトリミングする」実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習できます。