HTML一覧CSS一覧CSS関数FlexboxシミュレーターCSS一覧

文字

overflow-wrap 長い単語を折り返す

重要度3 / 5

意味

URLや長い英単語が、箱からはみ出すときに使います。overflow-wrap: anywhere は、入りきらない場所で折り返します。日本語の文章には、普段は不要なことが多いです。

break-word は、単語の途中では折らず、入りきらないときだけ折ります。メールアドレスやトークンを表示する場所から入れると安全です。

コード

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML
<p>https://example.com/very/long/path/that/should/wrap</p>
CSS
p {
  max-width: 16rem;
  overflow-wrap: anywhere;
}

プレビュー

ブラウザ対応

主要ブラウザの対応状況
ブラウザ対応
Chrome23〜
Firefox49〜
Safari7〜
Edge18〜
Chrome Android25〜
Safari iOS7〜

出典: MDN Web Docs(`@mdn/browser-compat-data`)