問題タブ [word-break]

必要に応じてテキストを単語の途中で折り返すことができる最善の解決策を探しています。せいぜい、私はほとんどのブラウザ互換性を意味し、単語の中で中断する前に単語の中断を優先します。

マークアップが私のものよりも見栄えが良ければ、それも役立ちます（私の答えを参照してください）。

編集：

これは特にユーザー生成コンテンツ用であることに注意してください。

編集2：

問題のサイトのFirefoxユーザーの約25％はまだv3.0以下を使用しているため、それらをサポートすることが重要です。これは、先月分のデータ（約121,000回の訪問）に基づいています。

<p>タグ内のタグに通常のテキストだけがあります<div>。ただし、正しく表示されるのは Firefox だけです。

Firefox は単語間の行を分割します。他のすべてのブラウザは単語の途中で改行するため、読みにくくなります。

これが私が意味することの例です：

Firefox (動作中):

他のすべてのブラウザー (IE5-8、safari、chrome) (動作していません:)

これをすべてのブラウザで機能させるにはどうすればよいですか?

現在、かなり難しい問題に直面しています。本当にありがとうございました。

td1 と td2 の 2 つの列を持ち、テキストを含むテーブルがあり、どちらも幅が固定されています。

td1.width = 10px および td2.width = 20px

固定幅は実行時に JQuery を使用して左から 1 つずつ設定されます (このテーブルは別のテーブル内にネストされているため...)

テキストの幅がこれらの固定幅よりも長くなる場合があり、そのシナリオでは予期される動作が次のようになります。

列の固定幅は同じままである必要があります1) 余分なテキストがある場合、テキストは折り返され、td 幅を増減してはなりません 2) 空のスペースがある場合、他のサイズを変更するときにセル幅を縮小しないでください列またはページ; そのままにしておく必要があります。

td.whitespace プロパティを pre-wrap および td.word-wrap: break-word に設定しましたが、役に立ちませんでした。

css 2.0 (3.0 ではない) を使用してこれらをどのように実現できるでしょうか?

ありがとう、

html の例:

LI が左に浮いている UL を含むトップ ナビゲーション メニューがあります。

各 LI には、各メニュー オプション間の区切りとして機能する CSS スタイル {border-right 1px solid} があり、CSS セレクタ last-of-type を使用して、最後の LI の border-right を削除しました。

ブラウザー ウィンドウのサイズが変更され、LI の一部が 2 行目にドロップダウンされるまで、これはすべて見栄えがします。最後の子スタイル ルールは必要に応じて引き続き適用されますが、この時点で、2 行目に折り返す前に、最後の LI から border-right も削除したいと考えています。

ワードラップ/改行の前に行の最後の要素を検出するjQueryまたは一般的なJavascriptの方法はありますか?

タグ内のテキスト<p>が長すぎるとこのように表示されるのですが、CSSでこれを防ぐには? CSS プロパティを試してみましたword-break: break-all;が、Firefox と Opera はこのプロパティをサポートしていません。また、他の「通常の」単語も壊れています。そのため、白の幅に応じて、非常に長い単語のみを分割し、短い単語は分割したくありません<div>。

詳細については、こちらをご覧ください: http://jsfiddle.net/Le4zK/16/

をサポートする要素の css を作成できるかどうかを判断しようとしていますword-wrap:break-wordが、分割が不可能な場合は、子の幅を取るために拡張されます。

上記のサンプルでは、​​URL は適切に分割されていますが、ウィンドウがテーブルよりも狭くなると、テーブルと img が赤い外側の div をオーバーフローします。

外側の div を display:inline-block または display:table にすると、赤い外側の div が正しく展開されてコンテンツが含まれますが、ウィンドウが URL よりも狭い場合でも URL は壊れません。

これは WebKit (Android 上) で動作するために必要なだけで、可能であれば CSS のみ (Javascript なし) のソリューションを見つけようとしています。

私はWordpressフレームワーク内で実験を行っており、ブログ投稿のタイトルを大きな正方形のブロックに表示させようとしています.形状を維持するために必要に応じて単語の途中に改行が表示されます.

word-wrapおよび (明らかに) CSS プロパティを使用してword-break、必要な外観を取得しました... Safari/Chrome で。Firefox 7 は単語を分割することを拒否します。IE は FF よりもわずかに優れていますが、その改行はより恣意的なものに見えます (また、現時点では IE は実際には優先事項ではありません)。主に、このインスタンスで FF が機能しない理由word-wrapおよび/または機能しない理由を理解しようとしています。word-break

• 私はテーブルを使用していません。
• word-breakここではアクティブな CSS プロパティのようです。それを削除して Safari/Chrome でページをテストしたところ、単語の途中で行が途切れなくなりました。
• 自動的に適用される Wordpress クラス (henry、format-standard など) が何らかの役割を果たしているとは思いませんが、間違っていたら訂正してください。jsfiddle リンクに示されているスタイリング以外に、他の CSS は標準の Twenty Eleven WP テーマです。

実際の例: (簡素化されていますが正確な HTML/CSS): http://jsfiddle.net/3U4Xc/1/

どんな入力でも大歓迎です。

次のコードがあります

http://jsfiddle.net/yXwh9/3/ 結果は http://jsfiddle.net/yXwh9/3/embedded/result/です

問題は、最初の行が壊れていて、「Techconnect は私たちが議論するグループです」が最初の行に来て、「テクノロジー、言語、プラットフォーム、開発、および IDE とフロントエンド開発」になっていることです。

2行目では、これが発生したくありません。含まれている部門の右側の境界で正確に分割する必要があります。<pre>（テキストに含まれていない可能性があるという理由だけで、解決策としては望んでいません<br/>。）

2列のテーブルがあります。最初の列に非常に長い単語があります。長い言葉を包んでもらいたい。

これは、HTMLテーブルのワードラップと同じ問題であることに気付いたかもしれません。そのスレッドで選択された答えは、「table-layout：fixed」を追加することです。これは、列幅を固定する必要があることを意味します。ただし、最初の列のコンテンツが長すぎて1行に収まらない場合にのみ、2番目の列がコンテンツに十分な幅を使用するように、テーブルを柔軟に保つ必要があります。

以下のコードは問題を示しています。IE/Chromeでうまく機能します。しかし、FireFoxでは、行は折り返されていません。

Firefoxでこの問題を回避するためのアイデアはありますか？

更新： 9日前にリリースされたFireFox15Betaでテストしました。「ワードブレイク」はFirefox15でサポートされるようになりました。ただし、15がリリースされて過半数になるまでには時間がかかる可能性があるため、以前のバージョンでは回避策が必要になる場合があります。

単にword-break: break-all要素を配置すると、多くの場合、次のようになります。

こんにちは、
長すぎて収まりきらないメッセージを入力しています。

明らかに、これは次のようにはるかに優れています。

こんにちは、
長すぎて収まらないメッセージを入力しています!

しかし同時に、誰かが書いた場合:

BLAAAAAAAAARRRRRRRRRRGGGGGGGGGHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH!!!!!!!!!

次に、次のようにしたいと思います。

BLAAAAAAAAARRRRRRRRRRRGGGGGGGGHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
!!!!!!!!!

実際にこれを行う方法を見つけることができないようです。

要素の幅は固定されておらず、変更される可能性があることに注意してください。