その他

長い文字列を折り返さずに「・・・」で切り取る方法【CSS】

タイトルの通り、CSSで長い文字列を折り返さずに「・・・」で切り取る方法

これを↓

こうしたい↓

答え

cssの記述例と、それぞれのプロパティの意味は以下のようになります。

p{
  white-space: nowrap; /*改行をさせない*/
  overflow: hidden;  /*はみ出た文字を非表示にする*/
  text-overflow: ellipsis; /*切り取られたテキストを表現するために省略記号「 … 」 を表示する*/
}
  • この記事を書いた人

コウダイ

文系・ノースキル・完全未経験・アラサー・地方住み・残業100時間超えの社畜ホテルマンから都内上場IT企業のフルリモートWebエンジニアに転職した人。

都内上場IT企業に勤務するWebエンジニア5年目｜プログラミングスクールのテックキャンプ公式アンバサダー｜新卒で手取り18万の地方ホテルマン6年→プログラミングを900時間勉強→転職活動100社以上応募→アラサー未経験から7ヶ月でフルリモートのWebエンジニアに転職し年収100万円UP｜33歳2児のパパ｜ブログ歴4年→月間6,000PV｜エンジニア転職ノウハウ、プログラミング、Web制作、副業での稼ぎ方など、「時間や場所に縛られずに稼ぐ」方法を発信しています。

-その他