文字が画面からはみ出す：長い文と狭い画面の対策

三つの対策が差し出すもの

はみ出しを止める方法は、情報の一部を何かと引き換えにします。

• 折り返し：文は全部残りますが、縦に伸びます。下にあるボタンや盤面を押し出し、画面外へ追いやることがあります。
• 省略（…で切る）：高さは変わりません。その代わり、切られた部分は読めなくなります。
• 縮小：全文が1行に収まります。ただし文字が小さくなり、読みにくさとタップのしにくさが残ります。

日本語は単語の間に空白がないため、ほとんどの位置で折り返せます（行頭に句読点が来ないなどの禁則処理はブラウザが行います）。一方、英語のURLや長い連続文字列は途中に切れ目がなく、折り返し指定をしないと枠を突き破ります。CSSでは overflow-wrap: anywhere を指定すると、切れ目のない文字列でも枠の端で折り返せます。

省略にも条件があります。text-overflow: ellipsis は単独では効かず、white-space: nowrap と overflow: hidden を組み合わせる必要があります。複数行で切りたい場合は、line-clamp系の指定（-webkit-line-clamp）を使います。

同じ文を並べて比べる検証ページ

次のHTMLを1つのファイルに保存してブラウザで開くと、同じ文を「そのまま」「折り返し」「1行省略」「2行省略」「縮小」の5つの枠に表示できます。外部ライブラリは使っていません。

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
 body{font:16px/1.6 sans-serif;margin:12px}
 .box{border:1px solid #888;margin:4px 0 12px;padding:4px;width:var(--w)}
 .wrap{overflow-wrap:anywhere}
 .ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .shrink{white-space:nowrap;overflow:hidden}
 textarea{width:100%;height:4em}
</style>
<textarea id="t">ここに確かめたい文を入れます。https://example.com/a-very-long-address-without-breaks</textarea>
<p>幅 <input id="w" type="range" min="120" max="500" value="300"> <output id="ow">300</output>px
 / 文字 <input id="f" type="range" min="12" max="32" value="16"> <output id="of">16</output>px</p>
<p>そのまま</p><div class="box" id="a"></div>
<p>折り返し</p><div class="box wrap" id="b"></div>
<p>1行で省略</p><div class="box ellipsis" id="c"></div>
<p>2行で省略</p><div class="box clamp" id="d"></div>
<p>縮小（下限10px）：<output id="os"></output>px</p><div class="box shrink" id="e"></div>
<script>
const $=id=>document.getElementById(id);
function draw(){
 const w=$("w").value,f=$("f").value;
 document.body.style.setProperty("--w",w+"px");
 document.body.style.fontSize=f+"px";
 $("ow").textContent=w;$("of").textContent=f;
 ["a","b","c","d","e"].forEach(i=>$(i).textContent=$("t").value);
 const e=$("e");let s=+f;e.style.fontSize=s+"px";
 while(e.scrollWidth>e.clientWidth&&s>10){s--;e.style.fontSize=s+"px";}
 $("os").textContent=s;
}
document.addEventListener("input",draw);draw();
</script>

縮小の枠は、文字サイズを1pxずつ下げて収まる大きさを探します。下限を10pxにしてあるので、それでも収まらない場合は、枠からはみ出したまま（実際には隠れたまま）になります。この「下限に達しても収まらない」状態が、縮小という対策の限界です。

記録の取り方と結果の読み方

ページを開いただけでは感想で終わるので、観察する条件を決めます。

準備するもの：検証ページ、自作ゲームで実際に表示される文を4種類ほど。たとえば短いボタン名、ステージ名、ヒント文、数十字から100字を超える説明文です。英語表示にも対応するなら、英語版の文も用意します。

手順：

1. 文を1種類ずつテキスト欄に入れます。
2. 幅を 320px、240px、160px の3段階にします。実機の幅に近い値を使うと、後で比べやすくなります。
3. 文字サイズを16pxと24pxの2段階にします（文字を大きくして遊ぶ人を想定します）。
4. 文×幅×文字サイズの組ごとに、5つの枠それぞれについて次の3点を記録します。

• 最後まで読めるか（はい／いいえ）
• 縦にどれだけ伸びたか（行数）
• 縮小の枠に表示された最終サイズ

記録は、表計算ソフトやメモに「文の種類／幅／文字サイズ／方式／読めたか／行数／最終サイズ」の列で残せば十分です。全部で 4×3×2＝24 の組ができるので、1組あたり数十秒で済みます。

読み方の目安：

• 「いいえ」が出た方式は、その文には使えません。省略は、切られた先に重要な語があるかどうかが分かれ目です。
• 行数が増えて下のボタンが画面外へ出る場合、その折り返しは操作を妨げます。余白に収める必要があるか、文を短くする必要があります。
• 縮小の最終サイズが下限の10pxに張りつく組が多いなら、縮小は主な手段にしないほうがよいでしょう。

結果は読者の画面や文面によって変わるので、ここで数値は示しません。

文の種類ごとの判断基準

比べた記録をもとに、文の種類で方式を割り当てます。次の判断基準を出発点にしてください。

• 操作に必要な短い語（ボタン名）、向く方式：縮小は最小限、できれば語を短くする、理由：切れると押す意味が変わる
• 名前（作品名・ステージ名）、向く方式：1〜2行の省略、全文は別の場所で見せる、理由：先頭で見分けがつく
• 状況を伝える文（ヒント、失敗の理由）、向く方式：折り返し、理由：末尾に「3回で終了」のような重要語が来やすい
• 長い読み物（説明文、レビュー）、向く方式：折り返し＋高さ制限でスクロール、理由：省略すると読めなくなる
• 並び順に意味がある列（ステップなど）、向く方式：横スクロール、理由：折り返すと順序が崩れる

省略を選ぶときの注意は、切られる位置です。文の最後に条件や結果が来る書き方だと、省略で最も大事な部分が消えます。文の書き方を変えて、先に結論を置くほうが安全な場面もあります。

公式作品から読み取れること

アソバースの公式作品の確認済みの記述から、はみ出し対策に関わる点を拾います。いずれも「設計から読み取れること」であり、実際の画面の細部は作品を開いて確かめてください。

WAVE / WAVE：狭い画面ではステップが横スクロールになります。4つの音を16ステップに並べる作品で、ステップ列は並び順そのものに意味があります。折り返すと列が途切れ、縮小すると押しにくくなる可能性があります。そこで横スクロールを選んだ、と読み取れます。実際にどう見えるかは、ブラウザ幅を狭めて開いて確かめられます。

潮目のオセロの「理由付きヒント」：理由の文は長さが一定とは限りません。どの方式で表示しているか、狭い幅で開いて確かめられます。ヒントのような状況説明に、先ほどの表の「折り返し」が合うかどうかも、ここで確認できます。

灯りのチェス：取った駒と全棋譜を表示します。対局が進むほど文字列が増えるので、増え続けるものをどう収めているか（折り返すか、スクロールか）は、対局を進めて確かめます。

日英の切り替え：サイトの日本語／英語設定に合わせて表示が変わり、作者が入力した作品名や紹介文は書き換えられません。つまり、日本語表示の画面に英語の長い作品名が入ったり、その逆が起きたりします。文の長さを事前に決め打ちできないので、固定幅を前提にした作りは危うくなります。

プレイ画面の拡大：言語変更とプレイ画面の拡大では進行が保たれます。拡大すると、表示できる文字数が実質的に減ります。拡大を想定すれば、狭い画面と同じ条件で検証できます。

投稿作品については、ゲームがiframe（ページの中の別枠）の中で動くため、ゲームから見える幅はブラウザ窓ではなく枠の大きさです。検証ページの幅スライダーは、この枠幅の変化を試す手段としても使えます。

起こりやすい誤り

• PCの幅だけで確認する：スライダーを160px程度まで下げて、初めて見える問題があります。
• 日本語だけで確認する：英語表示の文や、切れ目のない文字列も入れて確かめます。
• 縮小で全部解決しようとする：下限に張りつく文が出たら、縮小は諦めて文を短くするか、折り返しに切り替えます。
• 省略した文の全文を見る手段がない：省略するなら、タップして全文を見られる場所も用意します。
• 折り返しで操作ボタンが押し出される：文の領域に高さの上限とスクロールを付ける手があります。

次の行動

検証ページを保存して、自作ゲームで実際に使う文を4種類入れてください。幅を3段階、文字サイズを2段階に変えて、読めたかどうかと行数を記録します。「いいえ」が出た組から、方式を見直しましょう。公式作品のWAVE / WAVEは、狭い画面での見え方を実際に開いて確かめる題材として使えます。

参考資料

• MDN Web Docs「text-overflow」
• MDN Web Docs「overflow-wrap」
• MDN Web Docs「-webkit-line-clamp」