web-dev-qa-db-ja.com

よりスマートなWordはCSSで中断しますか？

Word-break: break-all要素で、私はしばしばこれで終わります：

こんにちは人々、私はメスを入力しています
長すぎて収まらないセージ！

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

こんにちは人々、私はタイプしています
メッセージが長すぎて長すぎます！

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

BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH !!!!!!

それから私はそれがなりたいです：

BLAAAAAAAAARRRRRRRRRRR
RGGGGGGGGHHHHHHHH !!!!!!

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

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

cssword-break
47
Niet the Dark Absol

Word-break: break-Word;を試してください。期待どおりに動作するはずです。

37
PJ McCormick

多くのプロジェクトでは、必要に応じて通常これを追加します。

.text-that-needs-wrapping {
    overflow-wrap: break-Word;
    Word-wrap: break-Word;
    -ms-Word-break: break-all;
    Word-break: break-Word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

さまざまなブラウザーでのほとんどの奇妙な状況を処理します。

15
Dominic White

スマートワードブレークの場合、またはcorrectワードブレークの場合、最初に言語依存のルールが必要です。英語および他の多くの言語の場合、正しい改行はハイフネーションを意味し、改行が発生すると行末にハイフンが追加されます。

CSSでは hyphens: auto ですが、ベンダープレフィックスを使用してそれを複製する必要があります。これはIE 9では機能しないため、代わりに Hyphenate.js のようなJavaScriptベースのハイフネーションを検討することができます。どちらの場合も、言語マークアップ（ lang属性）。

ハイフネーションできない長い文字列を分割することは、別の問題です。これらは前処理で処理するのが最適ですが、簡単な設定ではWord-break: break-Word（つまり、正しくない英語の単語の分割など）は緊急事態と見なされる場合があります。

4
Jukka K. Korpela