More than 3 years have passed since last update.

Bulmaで長い文字列が原因でレイアウトが崩れるときの対処方法

Posted at 2021-10-31

CSSフレームワークのBulmaを使用した際に長い文字列が原因でレイアウトが崩れるときの対処方法です。

対処方法

css

.text-break {
  word-break: break-word;
}

text-breakクラスを長い文字列が入る親要素に追加します。

上が長い文字列が原因でレイアウトが崩れている様子で、下が長い文字列があってもレイアウトが崩れていない様子です。