テキストオーバーフローで長いコンテンツを省略表示できるようになりました！

※この記事は2025年3月26日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

Truncate long content with text overflow

‍

テキストが長すぎる場合に省略記号（…）で表示を切り詰められるtext overflow CSSプロパティの新機能が追加されました。

Webflowでは、面倒なスタイル設定やCSSプロパティを覚えなくても、Styleパネルから簡単にこの設定ができるようになっています。

このオプションは、Stylesパネル → Typography → More type options → Truncateの中にあります。
ここで「Truncate」を有効にすると、テキストがカットされる時に自動で「…」が表示されます。

text-overflowを正しく機能させるためには、overflow: hiddenやwhite-space: nowrapなど、特定のサポートスタイルと組み合わせる必要があります。
そこでWebflowでは、smart guidance（スマートガイダンス）を実装。トランケートを有効にした際に追加プロパティが必要な場合は通知が表示され、その場でワンクリックで必要な設定を適用できる仕組みになっています。

‍

この機能の詳しい使い方については、Help Centerのガイドをご覧ください。

‍

注意：行数指定について
‍

今回紹介したtext-overflow: ellipsisは、1行のみを省略表示できるプロパティです。

そのため「何行まで表示して、それ以上は省略記号にしたい」といった複数行の指定には対応していません。

そのようなケースでは、以下のようなカスタムCSSを利用する方法が一般的です。

‍

例えば最大3行表示、それ以上はみ出した文字は省略記号にしたい場合…

.truncate-3 {
  display: -webkit-box;        /* Flexboxの一種 */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;       /* 最大3行 */
  overflow: hidden;            /* はみ出しを隠す */
}

この方法を使えば、例えば「3行まで表示して、それ以上は…で省略」という表現が可能になります。