はじめに
この実験では、CSS プログラミングの世界に入り、1 行の幅を超えるテキストを省略する方法を学びます。overflow、white-space、および text-overflow プロパティを組み合わせることで、省略されたテキストの末尾に省略記号を表示できるようになります。この実験を通じて、ウェブサイト上のテキストの表示を最適化する方法を深く理解することができます。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。
テキストを省略する
VM には既に index.html と style.css が用意されています。
1 行より長いテキストを省略し、末尾に省略記号を追加するには、次の CSS プロパティを使用します。
overflow: hiddenで、テキストが要素の寸法を超えないようにするwhite-space: nowrapで、テキストが高さで 1 行を超えないようにするtext-overflow: ellipsisで、テキストが要素の寸法を超えた場合に省略記号を追加する- 省略記号を表示するタイミングを知るために、要素に固定の
widthを指定する
この方法は、単一行の要素にのみ適用されます。例えば：
<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>
.truncate-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}
右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。
まとめ
おめでとうございます！テキストを省略する実験を完了しました。スキルを向上させるために、LabEx でさらに実験を行って練習してください。