2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] text-overflowプロパティでボックスに収まらない文章の表示方法を指定しよう!

text-overflowの評価
頻出度
(1.0)
重要度
(1.0)
総合評価
(1.0)




1.text-overflowとは?

text-overflowプロパティはボックスに収まらずあふれた文章の表示方法を指定します。

値の指定方法は以下の通りです。

{ text-overflow: 値; }

値の指定方法

  • clip
  • ellipsis
  • 任意の文字
  • fade
  • fade()




2.text-overflowの使い方

それではtext-overflowの使い方をみていきましょう。

.over-text {
 overflow: hidden;
 white-space: nowrap;
 width: 120em;
 text-overflow: ellipsis;
}

上記の例では収まらない部分が(…)で表示されます。

他にも値を設定できるのでいろいろと試してみることをお勧めします!




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です