はじめに

スマホでHugoで作成したサイトを見たときに、長いURLがはみ出していることに気づきました。

この記事では、以下のようにURLをはみ出さないよう改行する方法を紹介します。

before	after

方法

HUGOのテーマのフォルダからaタグのスタイルを設定している箇所を探し、word-break: break-all;を追加します。

a {
    text-decoration: none;
    color: var(--accent-color);
    word-break: break-all; // 追加する
    ...
}

これで、スマホで表示した際にも長いURLがはみ出さないように改行することができます。