cssまたはjqueryを使用して、以下に示すように単語を分割する解決策を教えてください。

サンプル1

に分割する必要があります

サンプル 2

に分割する必要があります

サンプル 3

に分割する必要があります

試してみましword-break: break-all;たが、機能していません

ブレーク/ラップは、Google Chrome と Mozilla Firefox で動作が異なるようです。

グーグルクローム：

モジラ ファイアフォックス:

どちらもまったく同じ CSS を持っています。

しかし、私はそれを一貫させることができません。長い単語を次の行に移動したいのですが、それでも収まらない場合は、どこかで区切ります (私の写真の Google Chrome のように)。

どうすれば Mozilla Firefox にもそれをさせることができますか? それを行う正しい方法とその理由は何ですか？

「p」タグ内の SVG シンボルを、ドットや疑問符などの句読点が 1 つの単語として扱われるように処理しようとしています。

行が改行されると、シンボル全体がドットで次の行に移動し、その後に続くドットだけでなく、次の行に移動することを意味します。

私は運がないCSSでこれを達成しようとしました。

ここにコードペンの例があります...

http://codepen.io/sheko_elanteko/full/RomyWa/

最後の単語が「テキスト」であることに気付くでしょう。ドットが続くと正常に壊れますが、その前の svg シンボルは壊れません。

「word-break: break-all」を使用して、文字間に区切りを挿入しています。
ただし、Chrome では、以下のような特定の文字 (コロン、セミコロン、コンマなど) では期待どおりに動作しません。
(私のコードペンはこちら: https://codepen.io/yukito/pen/wobZJq )

ソースコード：

FireFox と Safari では、期待どおりに動作しています。

私の質問:
. バグですか？それとも仕様？
. Chrome で連続するセミコロンの間で改行するにはどうすればよいですか?

ありがとうございました。

アップデート：

「break-word」は、このペンのように単語の境界を考慮して改行します: https://codepen.io/yukito/pen/xRNopJ
単語の境界を考慮せずに任意の文字間に改行を挿入したいのです。

テーブルに を設定し table-layout: fixed;ましたが、各セル内の単語が改行されています。

ここで提案されwhite-space: nowrap;ているように、無駄に追加するという解決策を試しまし た

質問: 固定レイアウトのテーブル セルで単語の区切りを防ぐにはどうすればよいですか?

テーブル レイアウト:

CSS:

テキストを含む 5 つのコンテナーがあります。

私の考えは、テキストが my に達するまでフロートすることmax-width: 350pxでした。それが到達すると、言葉を壊すはずです。私の最後のコンテナはテキストの長さが最大幅に達するはずですが、350pxまでフロートする必要はなく、単語を分割する必要がないため、2つの単語のみを含む最初のテキストは短くなると思いました350px の単語を分割します。私が抱えている問題は、すべてのコンテナが同じ幅になっていることです。どうしたの？私も使用しようとしましmin-width: 100px;たが、役に立ちませんでした。何か案は？