モバイルデバイスの段落内の単一行が改行に折り返される
最近、さまざまなモバイルデバイスやデスクトップで段落がどのように表示されるかについて、チームの技術者ではないメンバーから連絡を受けました。彼らは特に、「ぶら下がっている」単語の数を心配しています。つまり、コンテナーのエッジに達したために新しい行にドロップし、スペースがなくなったということです。
通常、彼らが私に求めていることは、Wordを他のユーザーと同じように戻すことです。これには、私がしたくないフォントのサイズを小さくすることが含まれます。 2行目に単語を追加すると、段落のバランスがよくなります。
以下の画像を含めて、私の意味を説明します。
画像1：画面幅380pxのテキストの段落は、最後の単語「risus」がそれにぶら下がっていることに気づきます。
画像2：画面幅400pxのテキストの段落では、単語が行に折り返されていないことに注意してください。
画像3：画面幅375pxのテキストの段落。 「risusのvehicula」がすべて1行になっているので、段落のバランスがとれています。
しかし、本当の問題は、世の中にある大多数のデバイスと画面サイズを考慮すると、これを防ぐことができないということです。それとも私は無知ですか？これが起こらないようにする方法はありますか？使い勝手に問題はありませんか？
あなたが望むのは Knuth-Plassの改行アルゴリズム だと思います。このアルゴリズムは、段落内の単語をすべての行に分散し、テキストがより均一に見えるようにします。その結果、間隔がより一貫し、エッジがより整列され、最後の行により多くの単語が含まれます。
したがって、たとえば、
素早い茶色の狐が怠惰を飛び越えた
犬
になる
クイックブラウンフォックス
怠惰な犬を飛び越えた
残念ながら、このサポートはTeX以外では一般的ではありません。 CSSに追加するための プロポーザル がありますが、それだけです。ただし、このアルゴリズムを実装するJavaScriptライブラリは2つあります Typeset および BalanceText 。後者には デモページ さえあります。
お役に立てば幸いです。
最も簡単な解決策は、段落の最後の2つの単語の間に改行しないスペースを追加することです。これを必要としないほど長い単語もあります。
これは、CSSの使用方法に関する問題のほうが多いと思います。これらの提案のいくつかを試しましたか？ https://stackoverflow.com/questions/4652654/how-to-turn-off-Word-wrapping-in-html
また、段落の左端に残りの1つまたは2つの単語を配置して、配置を左または両端揃えに変更することをお勧めします。画面の中央にあるよりも目が自然に見つけやすいので、これは「不均衡」な言葉の感覚に役立つと思います。