CSS

CSS – 文字の折り返しを強制に適用する

文字の折り返しを強制的適用させるには下記のコードで問題ないかと思います。word-break: break-all !important;みたいにしてもいいですが全省セレクタで設定しておくのが楽かなと思いました。

*{
    word-break: break-all;
    overflow-wrap: break-word;
}

そのほうがあとで部分的に折り返しを無効にしたいときに!importantを使わないといけないのでそれはそれで無駄なコードが増えると思うので上記の全省セレクタで適用するのがいいかなと思いました。

上記で設定していればブロック要素内のインライン要素にも折り返しが適用されると思います。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{
        word-break: break-all;
        overflow-wrap: break-word;
    }
    span{
        color:pink !important;;
    }
    span.red{
        color:red !important;
    }
    </style>
</head>
<body>
<p class="box">イギリスのウェールズ北部にある小さな村<span class="red">「ランヴァイル・プルグウィンギル・ゴゲリフウィルンドロブル・ランティシリオゴゴゴホ」</span>（Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch）をご存知だろうか。この名前は58文字（ウェールズ人が話すように、連続する2つのLを1文字とみなせば53文字）もあり、当然ながらとても読みにくい。村の名前としては世界最長とされるこの名前は、ウェールズ語で、<strong>「激しい渦巻きと赤い洞窟の聖ティシリオ教会の近くにある、白いハシバミの泉のほとりにある聖マリア教会」</strong>という意味だという。なお、世界最長の都市名はバンコクの正式名称（タイ文字で112文字）だとされる。この村名は、実はそれほど古いものではない。1880年代半ばに、旅行客の関心を惹きつける名前にしようという目論みで付けられたそうだ。このアイデアを思いついたのは地元の靴職人だったが、その読みは当たった。大勢の観光客たちが、この村に集まってきたのだ。たいていは、ランヴァイル・プルグウィンギル、ランヴァイルプル、ランヴァイルPGといった略称で呼ばれるこの村の正式名をどう発音するか、学ぶためのツールもたくさんある。たとえば、簡単な歌（以下の動画）は、初心者が基礎をマスターするのに最適だ。</p>
<p class="box"><strong>Lorem Ipsum</strong>は、印刷および植字業界の単なるダミー テキストです。 <a href=""> Lorem Ipsum は、1500 年代に未知の印刷業者がタイプのギャレーを取り、それをスクランブルしてタイプ見本帳を作成して以来、業界の標準的なダミー テキストでした。</a><strong>それは 5 世紀だけでなく、電子植字への飛躍にも耐え、本質的に変わっていません。</strong> 1960 年代に Lorem Ipsum のパッセージを含む Letraset シートがリリースされ、最近では Lorem Ipsum のバージョンを含む Aldus PageMaker のようなデスクトップ パブリッシング ソフトウェアで普及しました。</p>
<div class="box">
<h2>なぜそれを使用するのですか？</h2>
<p>ページのレイアウトを見ているときに、ページ(https://localhost8888.net/sample-page-sample-page-sample-page-sample-page-sample-page-sample-page-sample-page/)の読みやすいコンテンツに読者が気を取られることは、長い間確立された事実です。 Lorem Ipsum を使用するポイントは、「ここにコンテンツ、ここにコンテンツ」を使用するのとは対照的に、文字が多かれ少なかれ正規分布しているため、読みやすい英語のように見えることです。 現在、多くのデスクトップ パブリッシング パッケージや Web ページ エディターは Lorem Ipsum をデフォルトのモデル テキストとして使用しており、「lorem ipsum」を検索すると、まだ初期段階にある多くの Web サイトが見つかります。 さまざまなバージョンが何年にもわたって進化してきましたが、偶然にも、意図的に (ユーモアを注入するなど) にもなりました。</p>
</div>
</body>
</html>

日本語と英語が混ざると折り返しされない時もあると思いますが、前述でのコードで解決できました。