その他

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

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

これを↓

こうしたい↓

答え

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

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

コウダイ

都内のWeb系自社開発企業に勤務するエンジニア｜33歳1児のパパ｜ブログ歴4年→月間6,000PV｜新卒で手取り18万のホテルマン6年→プログラミングを900時間勉強→100社以上応募しアラサー未経験から7ヶ月でフルリモートのWEB系自社開発エンジニアに転職し年収100万円UP｜【人生を自由に、ノンストレスで生きる】をテーマに、30歳で文系・異業種未経験からITエンジニアに転職したノウハウの他、プログラミングやブログで稼ぐ方法など、「時間や場所に縛られずに稼ぐ」方法を発信しています。

-その他