長い単語が私のdivを壊すのを防ぐ方法は？

TABLEレイアウトからDIVレイアウトに切り替えて以来、1つの共通の問題が残っています。

問題：DIVに動的テキストを入力すると、必然的にdiv列の端を超えて非常に長い単語が存在し、サイトが専門外のように見えます。

RETRO-WHINING：これは、テーブルレイアウトでは発生しませんでした。表のセルは常に最も長い単語の幅にうまく拡張されます。

重大度：この問題は、ほとんどの主要なサイト、特に「速度制限」などの一般的な単語でさえ非常に長いドイツのサイト（「Geschwindigkeitsbegrenzung」）でも見られます。

誰かがこれに対して実行可能な解決策を持っていますか？

ソフトハイフン

長いハイフンを分割する場所をブラウザに伝えるには、ソフトハイフン（­）を挿入します。

averyvery­longword

次のようにレンダリングできます

averyverylongword

または

averyvery-
ロングワード

優れた正規表現を使用すると、必要な場合を除き、それらを挿入しないようにすることができます。

/([^\s-]{5})([^\s-]{5})/ → $1­$2

ブラウザと検索エンジンは、テキストを検索するときにこの文字を無視するのに十分スマートであり、ChromeとFirefox（他のテストをしていない）は、テキストをクリップボードにコピーするときに無視します。

<wbr> 素子

もう1つのオプションは<wbr>、以前のIE-ismを注入することです。これは現在HTML5に含まれています。

averyvery<wbr>longword

ハイフンなしの改行：

averyvery
ロングワード

ゼロ幅の空白文字​（または&#x200B）でも同じことができます。

参考までに、最新のIE、Firefox、Safari（現在Chromeではない）でサポートされているCSShyphens: autoもあります。

div.breaking {
  hyphens: auto;
}

ただし、そのハイフネーションはハイフネーション辞書に基づいており、長い単語を壊すことは保証されていません。それでも正当化されたテキストをきれいにすることができます。

レトロ風のソリューション

<table>レイアウトは悪いですがdisplay:table、他の要素では問題ありません。古い学校のテーブルと同じくらい風変わりな（そして伸縮性のある）ものになります。

div.breaking {
   display: table-cell;
}

overflowそしてwhite-space: pre-wrap以下の答えはあまりにも良いです。

2つの修正：

1. overflow:scroll -これにより、デザインを犠牲にしてコンテンツを表示できるようになります（スクロールバーは見苦しいです）
2. overflow:hidden-オーバーフローを遮断します。それは人々がコンテンツを読むことができないことを意味します。

（SOの例で）パディングとオーバーラップしないようにする場合は、コンテンツを保持するために、パディング内に別のdivを作成する必要があります。

編集：他の回答が述べているように、クライアント側でレンダー幅を計算することはさまざまな方法があります（クライアント側でこのサーバー側を実行しようとしないでください） JSとブレーク文字の挿入、または非標準のタグや非常に互換性のないCSSタグの使用（word-wrap: break-word Firefoxでは機能しないようです）。

ただし、常にオーバーフロー記述子が必要になります。divに別の広すぎるブロックタイプのコンテンツ（画像、テーブルなど）が含まれている場合は、レイアウト/デザインを破壊しないようにオーバーフローする必要があります。

したがって、必ず別の方法（またはそれらの組み合わせ）を使用しますが、すべてのブラウザーをカバーできるようにオーバーフローも追加することを忘れないでください。

編集2（以下のコメントに対応するため）：

CSS overflowプロパティの使用を開始することは完璧ではありませんが、デザインの破損を防ぎます。overflow:hidden最初に適用します。オーバーフローがパディングで壊れない可能性があるので、をネストするかdivボーダーを使用することを覚えておいてください（あなたにとって最も効果的なものなら何でも）。

これにより、オーバーフローするコンテンツが非表示になるため、意味が失われる可能性があります。スクロールバーを使用することもできます（を使用するoverflow:autoか、overflow:scroll代わりにoverflow:hidden）。ただし、divのサイズとデザインによっては、これが見栄えが悪い、またはうまく機能しない場合があります。

それを修正するために、JSを使用して物事を引き戻し、何らかの形の自動切り捨てを行うことができます。私はあなたのためにいくつかの疑似コードを書いている途中でしたが、それは途中でかなり複雑になります。できるだけ多くを表示する必要がある場合は、ハイフネーターを調べてください（以下で説明します）。

これはユーザーのCPUを犠牲にすることになることに注意してください。ページの読み込みやサイズ変更に時間がかかる可能性があります。

これは、私たちが知っているように複雑な問題であり、ブラウザー間で一般的な方法でサポートされていません。ほとんどのブラウザは、この機能をネイティブでサポートしていません。

HTMLメールで行われた一部の作業では、ユーザーコンテンツが使用されていたが、スクリプトは利用できません（CSSでも十分にサポートされていません）。スペースのないコンテンツブロックのラッパーにある次のCSSは、少なくともある程度は役立つはずです。

.word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

Mozillaベースのブラウザーの場合、上記のXBLファイルには以下が含まれます。

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

残念ながら、Opera 8+は上記のいずれのソリューションも好きではないようです。そのため、JavaScriptはそれらのブラウザー（Mozilla / Firefoxなど）のソリューションでなければなりません。Operaの新しいエディションを含む別のクロスブラウザーソリューション（JavaScript）ここにあるHedger Wangのスクリプトを使用することになります：http : //www.hedgerwow.com/360/dhtml/css-word-break.html

その他の便利なリンク/考え：

Incoherent Babble»ブログアーカイブ»Mozilla / FirefoxのCSSワードラップのエミュレート
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

[OU] Operaでワードラップなし、IEで問題なく表示
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera- users / 2004-November / 024468.html

CSSクロスブラウザーワードラップ

.word_wrap
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

スタイルを使用しますword-break:break-all;。私はそれがテーブルで機能することを知っています。

それをサポートするブラウザでword-wrap: break-wordは機能しないのですか？

スタイルシートの本文の定義に含まれている場合は、ドキュメント全体で機能します。

オーバーフローが良い解決策ではない場合、カスタムのJavaScriptだけが長い単語を人為的に分割することができます。

注：この<wbr>Word Breakタグもあります。これにより、ブラウザはラインを分割できる場所を提供します。残念ながら、この<wbr>タグはすべてのブラウザーで機能するわけではなく、FirefoxとInternet Explorer（およびCSSトリックを備えたOpera）でのみ機能します。

IE 7、Firefox 3.6.8 Mac、Firefox 3.6.8 Windows、Safariを確認したところ：

word-wrap: break-word;

幅が設定され、CSSでオーバーフローが宣言されていないdiv内の長いリンクに対して機能します。

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}

互換性の問題はありません

私はこの質問からハイフネーターについて知りました。それで問題が解決するかもしれません。

多くの戦いの後、これは私のために働いたものです：

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Chrome、Firefox、Operaの最新バージョンで動作します。

white-space他の人が提案した多くのプロパティを除外したことに注意してください-実際にはpreインデントを壊しました。

サイズが固定されていない動的なコンテンツのdivで私はそれを使用して動作しました：

display:table;
word-break:break-all;

このコメントの正規表現について、それは良いことですが、5つの空白またはハイフン以外の文字のグループ間にのみシャイハイフンを追加します。最後のグループは、その後に一致するグループがないため、意図したよりもはるかに長くなります。

たとえば、これ：

'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1­$2')

...この結果：

abcde­12345678901234

この問題を回避するために肯定的な先読みを使用するバージョンは次のとおりです。

.replace(/([^\s-]{5})(?=[^\s-])/g, '$1­')

...この結果：

abcde­12345­67890­1234

この問題に通常使用する解決策は、IEと他のブラウザーに2つの異なるCSSルールを設定することです。

word-wrap: break-word;

IEでは完璧ですが、ワードラップは標準のCSSプロパティではありません。これはMicrosoft固有のプロパティであり、Firefoxでは機能しません。

Firefoxの場合、CSSのみを使用するのが最善の方法は、ルールを設定することです

overflow: hidden;

ラップするテキストを含む要素。テキストは折り返されませんが、コンテナの制限を超えるテキストの部分は非表示になります。すべてのテキストを表示することが不可欠ではない場合（つまり、テキストが<a>タグ内にある場合）は、優れたソリューションになる可能性があります。

更新： CSSでこれを処理することは驚くほど単純でオーバーヘッドが少ないですが、ブレークが発生する場所を制御することはできません。気にしない場合や、データが自然に途切れることなく英数字の実行が長い場合は問題ありません。長いファイルパス、URL、電話番号がたくさんありましたが、いずれも他の場所よりも中断した方がはるかに良い場所があります。

私たちの解決策は、最初に正規表現の置換を使用して、空白ではない15文字（たとえば）ごとに、または改行を希望する特殊文字の後にゼロ幅のスペース（＆＃8203;）を配置することでした。次に、別の置換を行って、これらの特殊文字の後に幅ゼロのスペースを置きます。

ゼロ幅のスペースは画面に表示されないので便利です。データに重要なハイフンがあるため、恥ずかしがり屋のハイフンは表示時に混乱しました。ブラウザーからテキストをコピーする場合、ゼロ幅スペースも含まれません。

現在使用している特殊なブレーク文字は、ピリオド、スラッシュ、バックスラッシュ、コンマ、アンダースコア、@、|、およびハイフンです。ハイフンの後に改行を促すために何もする必要はないと思いますが、Firefox（少なくとも3.6および4）は、数字（電話番号など）で囲まれたハイフンだけでは改行しません。

また、使用可能なレイアウトスペースに基づいて、人工的な区切りの間の文字数を制御したいと考えました。つまり、長い中断のない実行に一致する正規表現は動的である必要がありました。これはよく呼ばれ、パフォーマンス上の理由から同じ同一の正規表現を何度も作成したくなかったため、正規表現とそのフラグをキーにした単純な正規表現キャッシュを使用しました。

これがコードです。あなたはおそらくユーティリティパッケージの関数に名前空間を付けるでしょう：

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^\\s\\.\/\\,_@\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1​') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1​'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

このようなテスト：

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

更新2：少なくとも一部の状況では、実際には幅がゼロのスペースがコピーされたテキストに含まれているように見えますが、それらを表示することはできません。明らかに、非表示の文字を含むテキストをコピーするように人々を促すことは、他のプログラムやシステムに入力したようなデータを持っていることを招待することであり、問​​題を引き起こす可能性があります。たとえば、それがデータベースで終わる場合、それに対する検索は失敗する可能性があり、このような検索文字列も失敗する可能性があります。矢印キーを使用してこのようなデータ間を移動するには、（正しく）見えない文字を移動するために追加のキーを押す必要があります。ユーザーが気づいたら、少し奇妙です。

クローズドシステムでは、入力時にその文字をフィルタリングして自分を保護できますが、他のプログラムやシステムには役立ちません。

このテクニックはうまく機能しますが、改行の原因となるキャラクターの最良の選択が何であるかはわかりません。

更新3：この特性がデータに含まれることは、もはや理論的な可能性ではなく、観察された問題です。画面からコピーされたデータをユーザーが送信すると、データベースに保存され、検索が中断され、物事が奇妙にソートされます。

私たちは2つのことをしました：

1. このアプリのすべてのデータソースのすべてのテーブルのすべての列からそれらを削除するユーティリティを書きました。
2. 標準の文字列入力プロセッサにそれを削除するためのフィルタリングが追加されたため、コードがそれを認識するまでに削除されます。

これはテクニック自体と同じようにうまく機能しますが、注意書きです。

更新4：これに供給されるデータがHTMLエスケープされる可能性があるコンテキストでこれを使用しています。適切な状況下では、HTMLエンティティの中央にゼロ幅のスペースを挿入でき、ファンキーな結果が得られます。

修正は、次のように、中断しない文字のリストにアンパサンドを追加することでした。

var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_@\\|-])', 'g');

ワードラップを機能させるには、「table-layout：fixed」を設定する必要があります

HYPHENATORは正しい答えです（上記を参照）。あなたの質問の背後にある本当の問題は、Webブラウザーがハイフネーション機能を持たないという（2008年の）まだ非常に原始的なものであるということです。見てください、私たちはまだコンピュータの使用の初期段階にあります-我慢する必要があります。デザイナーがウェブの世界を支配している限り、実際に役立つ新機能を待つのは難しいでしょう。

更新：2011年12月の時点で、FFおよびSafariでこれらのタグが新たにサポートされるようになりました。

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

基本的なテストをいくつか行いましたが、最近のバージョンのMobile SafariおよびSafari 5.1.1で動作するようです。

互換性テーブル：https : //developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable

IE 8+との互換性のために、以下を使用します：

-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

こちらをご覧くださいhttp://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

私がしなければならなかったのは、設定された幅のdivコンテナーのスタイルにこれを適用することだけでした。

これを使って

word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;

これがあれば-

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

divを含む垂直形式に切り替え、CSSで幅の代わりに最小幅を使用します-

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

もちろん、本物の表形式のデータを表示している場合は、意味的に正しいので実際のテーブルを使用しても問題はなく、テーブルにあるはずのスクリーンリーダーを使用しているユーザーに通知します。それは人々があなたをリンチする一般的なレイアウトや画像スライスにそれらを使用しています。

プロパティが正しい順序で宣言されていなかった場合、ハイフンを追加せずに間違った場所でランダムに単語を壊すため、次のことを行わなければなりませんでした。

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

Enigmoによる投稿：https : //stackoverflow.com/a/14191114

可能であれば、絶対幅の設定と設定overflow : autoがうまくいきます。

p {
    overflow-wrap: break-word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
}

"word-wrap：break-word"はFirefox 3.5で動作します http://hacks.mozilla.org/2009/06/word-wrap/

これをcssあなたのdivのに追加します：word-wrap: break-word;

すべての単語が折り返されて改行した後、オーバーフローを保持し、これで問題が解決するかどうかを確認します。divの表示を次のように変更するだけです。display: inline;

単純な関数（underscore.jsが必要）-@porneLの回答に基づく

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('­'));
        });
        return shystring.join(' ');
    };

私はそれが­良い改行のために単語にx文字を挿入する場所でうまく機能する関数を書きました。ここでのすべての回答は、すべてのブラウザーとデバイスをサポートしていませんが、これはPHPを使用してうまく機能します。

/**
 * Add line-break to text x characters in
 * @param  string  $text          
 * @param  integer $characters_in 
 * @return string                 
 */
function line_break_text($text, $characters_in = 10) {

    $split = explode(' ', $text);

    if ( ! empty($split)) {

        foreach ($split as $key => $var) {

            if ( strlen($var) > $characters_in ) {

                $split[$key] = substr_replace($var, '­', $characters_in, 0);

            }

        }

    }

    return implode(' ', $split);

}