【CSS】枠内からはみ出てしまうURLや連続する半角英数の文字列を折り返して表示する

日本語の場合は、通常表示エリアに対して文字単位で折り返しがされるので（句読点等の禁則処理は別だけど）、我々日本人にはあまり馴染みがないのだが、英文というのは英単語で折り返しされてしまう。

なので、通常の仕様だと、上の写真のタイトルのように半角英字がスペースもなく入力されていると、エリアからはみ出るのが普通です。

英文はスペースやハイフンがないと折り返しされない

英文というのは、連続する半角英数をひとかたまりとして、スペースやハイフンが間あると折り返しになる仕様になっている。ハイフンはハイフネーションという扱いなのだと思います。スペースやハイフンがない連続する半角英数文字は一つの単語として認識されるので、折り返される事なく枠内からはみ出して表示される。

スペースやハイフン以外は折り返しにならないのでピリオドやカンマなんかでも当然折り返されない。

URLが枠内からはみ出してしまう

ときどき、URLが長いため枠内に収まらないではみ出してしまっているページをたまに目にしますよね。

半角英数の連続文字を折り返すようにするプロパティ

そこで、overflow-wrapというプロパティを利用します。overflow-wrapは、単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。

MDN Web Docs

overflow-wrap:break-word;

するとはみ出した部分が折り返されて枠内に入って表示されるようになりました。

ちなみに、このプロパティはword-breakだったのだが、CSS3になってoverflow-wrapに改名されました。

いやぁ、これで長いURLなんかではみ出す事もなくなりました。