Zenn
Open3

【CSS】文字・Text関連のTips📝 (文字を折り返す/折り返さない方法などについて)

CSS
デザイン
Word
まさぴょん🐱まさぴょん🐱

white-space で文字を改行しないようにする📝

CSSで文字を改行しないようにするには、white-space プロパティを以下のように設定します。

white-space: nowrap;

これにより、テキストが自動的に改行されず、1行に収まります。

<div style="white-space: nowrap;">
  これは改行せずに表示される長いテキストです。
</div>

必要に応じて、overflow や text-overflow プロパティを組み合わせて、はみ出したテキストの処理を制御できます：

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* はみ出した部分を「...」で省略 */
}