Q&A
safariはどのOSのどのバージョンをご利用ですか？
長めの文章の中で「任意の場所で改行させたい」「改行で分断させたくない」ものがあります
そこで "white-space: nowrap" を使うことにしました
html
1<style>.nbr {white-space: nowrap }</style> 2<p> 3 <span class="nbr">改行の位置を</span><span class="nbr">好きな場所で</span><span class="nbr">できるようにしたい</span> 4</p>
このような文章で、極端に横幅を狭くすると、PCブラウザ（chrome,Edge）やAndroidブラウザの場合は、下記の通り目的どおり表示されます
html
1改行の位置を 2好きな場所で 3できるようにしたい
しかし、iPhone(XS)のsafari(ver15.2)で見てみると1行になり、はみ出してしまいます
html
1改行の位置を好きな場所でできるようにしたい
<span>の間に半角スペースまたは改行をいれると、safariも目的のとおりに表示してくれます
html
1<style>.nbr {"white-space: nowrap" }</style> 2<p> 3 <span class="nbr">改行の位置を</span> 4 <span class="nbr">好きな場所で</span> 5 <span class="nbr">できるようにしたい</span> 6</p>
しかしながら、この場合、不要なスペースが入り込むので避けたいと思っています
このような現象を抑制する方法はあるでしょうか？
また挙動としては、safariが正しいのでしょうか？
よろしくお願いします。
様々な回答がありがとございます。
今のところ、次のような結果となりました。
- nbr 英字はOK、日本語はNG
- word-break 英字NG、日本語NG
- white-space 英字NG、日本語OK（iPhoneSafariはNG）
PCとiPhoneの両方で「改行させたくない文章は改行させない」
という条件をみたすことができていません
テストコードを作ってみました
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width" /> <title>TEST</title> <style> body {background-color: white;} h3 {margin:0} #box1 {width: 150px; background-color: lightblue;} #box2 {width: 300px; background-color: pink;} #box3 {width: 550px; background-color: lightgreen;} .box { font-size:0.9em; margin: 10px; padding:10px;} .keep-all {word-break: keep-all} .nowrap {white-space: nowrap} </style> </head> <body> <div id="box1"> <div class="box"><h3>なし</h3> abcdefhijklmnopqrstuvwxyzabcdefhijklmnopqrstuvwxyzabcdefhijklmnopqrstuvwxyz<br> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん </div><div class="box"> <h3>wbr</h3> abcdefhijlmnopqrstuvwxyZ<wbr>abcdefhijlmnopqrstuvwxyZ<wbr>abcdefhijlmnopqrstuvwxyz<br> あいうえおかきくけこさしすせそー<wbr>たちつてとなにぬねのはひふへほー<wbr>まみむめもやゆよらりるれろわをん </div><div class="box"> <h3>nowrap</h3> <span class="nowrap">abcdefhijlmnopqrstuvwxyZ</span><span class="nowrap">abcdefhijlmnopqrstuvwxyZ</span><span class="nowrap">abcdefhijlmnopqrstuvwxyz</span><br> <span class="nowrap">あいうえおかきくけこさしすせそー</span><span class="nowrap">たちつてとなにぬねのはひふへほー</span><span class="nowrap">まみむめもやゆよらりるれろわをん</span> </div><div class="box"> <h3>keep-all</h3> <span class="keep-all">abcdefhijlmnopqrstuvwxyZ</span><span class="keep-all">abcdefhijlmnopqrstuvwxyZ</span><span class="keep-all">abcdefhijlmnopqrstuvwxyz</span><br> <span class="keep-all">あいうえおかきくけこさしすせそー</span><span class="keep-all">たちつてとなにぬねのはひふへほー</span><span class="keep-all">まみむめもやゆよらりるれろわをん</span> </div> </div> <div id="box2"> <div class="box"><h3>なし</h3> abcdefhijklmnopqrstuvwxyzabcdefhijklmnopqrstuvwxyzabcdefhijklmnopqrstuvwxyz<br> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん </div><div class="box"> <h3>wbr</h3> abcdefhijlmnopqrstuvwxyZ<wbr>abcdefhijlmnopqrstuvwxyZ<wbr>abcdefhijlmnopqrstuvwxyz<br> あいうえおかきくけこさしすせそー<wbr>たちつてとなにぬねのはひふへほー<wbr>まみむめもやゆよらりるれろわをん </div><div class="box"> <h3>nowrap</h3> <span class="nowrap">abcdefhijlmnopqrstuvwxyZ</span><span class="nowrap">abcdefhijlmnopqrstuvwxyZ</span><span class="nowrap">abcdefhijlmnopqrstuvwxyz</span><br> <span class="nowrap">あいうえおかきくけこさしすせそー</span><span class="nowrap">たちつてとなにぬねのはひふへほー</span><span class="nowrap">まみむめもやゆよらりるれろわをん</span> </div><div class="box"> <h3>keep-all</h3> <span class="keep-all">abcdefhijlmnopqrstuvwxyZ</span><span class="keep-all">abcdefhijlmnopqrstuvwxyZ</span><span class="keep-all">abcdefhijlmnopqrstuvwxyz</span><br> <span class="keep-all">あいうえおかきくけこさしすせそー</span><span class="keep-all">たちつてとなにぬねのはひふへほー</span><span class="keep-all">まみむめもやゆよらりるれろわをん</span> </div> </div> <div id="box3"> <div class="box"><h3>なし</h3> abcdefhijklmnopqrstuvwxyzabcdefhijklmnopqrstuvwxyzabcdefhijklmnopqrstuvwxyz<br> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん </div><div class="box"> <h3>wbr</h3> abcdefhijlmnopqrstuvwxyZ<wbr>abcdefhijlmnopqrstuvwxyZ<wbr>abcdefhijlmnopqrstuvwxyz<br> あいうえおかきくけこさしすせそー<wbr>たちつてとなにぬねのはひふへほー<wbr>まみむめもやゆよらりるれろわをん </div><div class="box"> <h3>nowrap</h3> <span class="nowrap">abcdefhijlmnopqrstuvwxyZ</span><span class="nowrap">abcdefhijlmnopqrstuvwxyZ</span><span class="nowrap">abcdefhijlmnopqrstuvwxyz</span><br> <span class="nowrap">あいうえおかきくけこさしすせそー</span><span class="nowrap">たちつてとなにぬねのはひふへほー</span><span class="nowrap">まみむめもやゆよらりるれろわをん</span> </div><div class="box"> <h3>keep-all</h3> <span class="keep-all">abcdefhijlmnopqrstuvwxyZ</span><span class="keep-all">abcdefhijlmnopqrstuvwxyZ</span><span class="keep-all">abcdefhijlmnopqrstuvwxyz</span><br> <span class="keep-all">あいうえおかきくけこさしすせそー</span><span class="keep-all">たちつてとなにぬねのはひふへほー</span><span class="keep-all">まみむめもやゆよらりるれろわをん</span> </div> </div> </body> </html>
その結果がこちらになります。
改行を期待するところを英字はZ,日本語は「ー」を入れています
そして肝心のiPhone safariですが、改行してくれません
iPhoneXS の safari 15.2 になります
質問に追記しておきます
回答4件
0
white-space: nowrap ではなく display: inline-block で期待する結果を得られませんか？必要があれば word-break: break-all も併記してください。
投稿2022/04/22 12:12
総合スコア2859
0
どちらが正しい動作なのかは調べていませんが、どちらにしても white-space: nowrap は空白文字の挙動を制御するプロパティなので、使い方が不適当だと思います。
word-break: keep-all がご希望のものじゃないでしょうか。
投稿2022/04/21 06:26
総合スコア20832
ありがとうございます
連続指定使っているのがよくないのか、思うような動作になりませんでした
0
スタイルタグの中になぜクォーテーションで囲んでいるのでしょうか？
css
1<style> 2.nbr { 3 white-space: nowrap; 4} 5</style>
投稿2022/04/21 06:23
総合スコア114769
あ、すみません。書き間違いです。修正します
0
<wbr> はどうでしょうか。
<wbr> - HTML: HyperText Markup Language | MDN
投稿2022/04/21 06:19
総合スコア36074
ありがとうございます。
英字だと改行してくれるのですが、日本語だとそのままでした
あなたの回答
tips
プレビュー
