CSSを使用してテキストが長すぎる場合に「...」を表示する方法

まず、以下のCSSコードを使用して、テキストが長すぎる場合に省略記号を表示するスタイルを作成します。

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

このスタイルは、テキストがはみ出さないように指定された幅内でテキストを表示し、テキストがはみ出す場合には省略記号「...」を表示します。

次に、テキストが長い部分にこのスタイルを適用する方法を説明します。HTML内でテキストを表示する要素に、クラス名「ellipsis」を追加します。

<p class="ellipsis">ここに長いテキストが入ります。</p>

このようにすると、指定した要素内のテキストが長すぎる場合には、「...」が表示されます。

この方法を応用して、さまざまな要素（例えば、見出し、段落、リンクなど）に対しても適用することができます。

以上が、CSSを使用してテキストが長すぎる場合に「...」を表示する方法です。この方法を使うことで、テキストの見た目をシンプルに保ちながら、内容がはみ出すのを防ぐことができます。