問題タブ [word-break]

シンプルなテーブルがあり、各行に複数のスパン タグがあります。各スパンには、異なる長さのテキストを含めることができます (ここでは構造のみを示します)。

テキストが大きい場合は、テキストを新しい行に移動するという、私が望む結果がほとんど得られます。私の唯一の問題は、スクリーンショットに見られるように、余分な空白 (灰色の領域) が得られることです。

そして、私はそれが次のようになりたいです:

余分な空白を取り除く方法はありますか? 前もって感謝します

テキストの段落に使用している div 要素があります。これはモバイル対応を目的としているため、さまざまなブラウザー/ビューポート サイズでテストしています。次のコードがあります。

ウィンドウのサイズが変更されると、Chrome では問題なく表示されます。w は改行されて改行されます。しかし、Firefox では単語がまったく途切れず、div 要素が展開されてすべてのテキストが含まれ、ページの下部にスクロールバーが作成されます。

Firefoxで単語が途切れるようにするにはどうすればよいですか? 追加しようとしましwhite-space: pre-wrap;たが、醜い改行を追加するだけで、単語の改行を強制することさえありません。それはすべての単語を壊してしまうので使いたくありませんword-break: break-all;。オーバーフローした単語だけを壊したいのです。overflow-wrap: break-word;また、何もしないように見えました。

編集:私はそれをこのように見せようとしています.これはChromeでどのように見えるかです: Chromeの成功

これは Firefox での表示です (私が望むものではありません): Firefox エラー

これはbreak-all、私が望むものではありません。単語が次の行に移動する可能性がある場合に単語がどのように分割されるかに注意してください:

firefox で動作する代替手段はありますか?word-break: break-word

firefox[Version 57.0]の場合

Chrome[バージョン 62.0.3202.94]

Firefoxでも属性を使用する方法または代替手段はありbreak-wordますか? [古いバージョンで動作する場合は、はるかに優れています。]

サンプルコード

私はこのコードを持っています:

デフォルトでは、テキストが行よりも長い場合、行は最も近いスペースで改行され、単語が半分の単語に分割されることはないため、これはほとんどの場合うまく機能します。良い。

ただし、文にスペースがない唯一のケース (これは決して起こらないはずですが、人は人です) では、インターフェイスが壊れて、長い単語が 1 行に残ります。

css に優先順位を付けて、スペースがある場合は単語を切り取らずに文を切り取る方法はありますか (word-wrap: break-word;) が、単語が行よりも大きい場合は改行して単語を切り取ります(word-break: break-all;) 視覚的な災害を避けるため。その順番で。

これまでのところ、「word-wrap: break-word;」を使用すると、「word-break: break-all;」を使用すると、その長さに関係なく、1 つの長い単語が 1 行に残ります。前に使用可能なスペースがある場合でも、単語は分割されます。これらの標準的な解決策はどれも役に立ちません。

どんな助けでも大歓迎です。

できれば CSS ソリューションが欲しいのですが、それが不可能な場合は、JS/jQuery ソリューションでも構いません。

PS: div に最大幅の自動幅を持たせる必要があり、スパンをテーブルセルのままにする必要があります。