CSSフレームワークのBulmaを使用した際に長い文字列が原因でレイアウトが崩れるときの対処方法です。
対処方法
css
.text-break {
word-break: break-word;
}
text-breakクラスを長い文字列が入る親要素に追加します。
CodePenのデモ
上が長い文字列が原因でレイアウトが崩れている様子で、下が長い文字列があってもレイアウトが崩れていない様子です。
See the Pen
bulma-text-break by kwtuku (@kwtuku)
on CodePen.
↧