web-dev-qa-db-ja.com

長い単語がdivを壊さないようにする方法は？

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

PROBLEM：DIVにダイナミックテキストを入力します。必然的に、div列のEdgeにまたがる非常に長いWordがあり、サイトが専門家に見えなくなります。

RETRO-WHINING：このneverはテーブルレイアウトで発生しました。テーブルセルは、常に最長のWordの幅にうまく拡大されます。

SEVERITY：私はこの問題を最も主要なサイト、特に「速度制限」などの一般的な言葉でさえ非常に長いドイツ語のサイト（「Geschwindigkeitsbegrenzung」）でも見ています。

誰もがこれに対して実行可能なソリューションを持っていますか？

csslayouthtml
146
Edward Tanguay

ソフトハイフン

ソフトハイフン（­）を挿入することで、長い単語を分割する場所をブラウザに指示できます。

averyvery­longword

としてレンダリングすることができます

とても長い

または

averyvery-
ロングワード

ニースの正規表現を使用すると、必要な場合を除き、挿入できなくなります。

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

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

<wbr>要素

もう1つのオプションは、以前の IE-ism であった<wbr>を挿入することです。これは、現在は HTML5で です。

averyvery<wbr>longword

ハイフンなしのブレーク：

ひらめき
ロングワード

ゼロ幅のスペース文字&#8203;（または&#x200B）でも同じことができます。

参考までに CSS hyphens: auto が最新のIE、Firefox、Safariでサポートされています（ 現在はChromeではありません ）：

div.breaking {
  hyphens: auto;
}

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

レトロウィニングソリューション

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

div.breaking {
   display: table-cell;
}

以下のoverflowおよびwhite-space: pre-wrap回答も適切です。

135
Kornel

2つの修正：

  1. overflow:scroll-これにより、デザインを犠牲にしてコンテンツを表示できるようになります（スクロールバーはいです）
  2. overflow:hidden-オーバーフローをカットします。ただし、コンテンツを読むことはできません。

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

編集：他の答えの状態として、単語を切り捨てるためのさまざまな方法があります。クライアント側でレンダリング幅を計算することです（このサーバー側は、クロスプラットフォームで確実に動作しないため、絶対に実行しないでください） JSとブレーク文字の挿入、または非標準または非常に互換性のないCSSタグの使用（Word-wrap: break-WordFirefoxでは機能しないようです ）。

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

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

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

CSS overflowプロパティの使用を開始することは完全ではありませんが、設計の中断を防ぎます。最初にoverflow:hiddenを適用します。オーバーフローはパディングで壊れないため、divsをネストするか、境界線を使用します（最適な方法は何でも）。

これにより、あふれるコンテンツが隠されるため、意味が失われる可能性があります。スクロールバーを使用できます（overflow:autoの代わりにoverflow:scrollまたはoverflow:hiddenを使用します）が、divの寸法とデザインによっては、見た目も動作もうまくいかない場合があります。

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

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

41
Oli

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

ユーザーのコンテンツが使用されていたがスクリプトが利用できない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など）のソリューションである必要があります。別のクロスブラウザーソリューション（JavaScript） Operaの後のエディションが含まれます。ここにある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

33
Neil Monroe

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+ */
}
27
Remo

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

14
sanimalp

それをサポートするブラウザでは、 Word-wrap: break-Word が機能しないということですか？

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

オーバーフローが良い解決策ではない場合、カスタムjavascriptのみが長いWordを人為的に分割できます。

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

13
VonC

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;
}

非互換性の問題は見られません

9
Zac Imboden

hyphenator from this question について知りました。これで問題が解決する場合があります。

6
dylanfm

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

.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インデントを壊しました。

6
mpen

固定サイズなしで動的コンテンツを使用するdivの私にとっては、それを使用して機能しました：

display:table;
Word-break:break-all;
5
Jacob

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

Word-wrap: break-Word;

iEでは完璧ですが、Word-wrapは標準のCSSプロパティではありません。これはMicrosoft固有のプロパティであり、Firefoxでは機能しません。

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

overflow: hidden;

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

4
alexmeia

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

たとえば、これ：

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

...この結果：

abcde&shy;12345678901234

この問題を回避するために、ポジティブルックアヘッドを使用したバージョンを次に示します。

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

...この結果で：

abcde&shy;12345&shy;67890&shy;1234
4
enigment

更新： CSSでこれを処理するのは素晴らしくシンプルでオーバーヘッドが低いですが、ブレークが発生したときにどこでブレークするかを制御することはできません。気にしない場合、またはデータに自然な中断のない長い英数字の実行がある場合は、これで問題ありません。長いファイルパス、URL、電話番号がたくさんありましたが、それらはすべて他の場所よりもはるかに良い場所にあります。

私たちの解決策は、最初に正規表現の置換を使用して、空白ではない15（たとえば）文字または改行が必要な特殊文字の1つごとにゼロ幅のスペース（＃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&#8203;') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1&#8203;'); // 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：実際にはゼロ幅のスペースがありますare少なくともいくつかの状況ではコピーされたテキストに含まれますが、それらは見えません。明らかに、隠された文字を含むテキストをコピーすることを人々に奨励することは、問題を引き起こす可能性のある他のプログラムやシステム、さらにはあなた自身のものに入力するようなデータを持っていることへの招待です。たとえば、データベースで終了すると、それに対する検索が失敗する可能性があり、このような検索文字列も失敗する可能性があります。矢印キーを使用してこのようにデータを移動するには、見えないキャラクターを移動するために（正しく）追加のキーを押す必要があります。

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

すべてが言ったように、このテクニックはうまく機能しますが、ブレークを引き起こすキャラクターの最良の選択が何であるかはわかりません。

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

次の2つのことを行いました。

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

これは、テクニック自体と同様にうまく機能しますが、警告的な話です。

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

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

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

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

3
Aleks

これを使用

Word-wrap: break-Word;
overflow-wrap: break-Word;
Word-break: break-all;
2
Jay Patel

HYPHENATORは正しい答えです（上記）。あなたの質問の背後にある本当の問題は、ウェブブラウザが依然として（2008年に）非常に原始的であり、ハイフネーション機能がないことです。見て、私たちはまだコンピューター使用の初期段階にいます-我慢しなければなりません。デザイナーがWebの世界を支配している限り、本当に便利な新機能を待つのは大変です。

更新：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

2
Snaky Love

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コンテナのスタイルに適用することだけでした。

2
DoctorFox

これがあれば-

  <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で幅の代わりにmin-widthを使用します-

  <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/>

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

1
Dan Brown

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

1
John Gietzen
p {
    overflow-wrap: break-Word;
}


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

プロパティが正しい順序で宣言されていないと、ハイフンを追加せずに間違った場所で単語をランダムに分割するため、次の操作を行う必要がありました。

    -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;

もともとエニグモ投稿： https://stackoverflow.com/a/14191114

1
jacobsvensson

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

0
mb21

これをdivのcssに追加します：Word-wrap: break-Word;

0
Kishan Subhash

すべてのWordがラップして壊れた後、オーバーフローを保持し、これが問題を解決するかどうかを確認します。単にdivの表示をdisplay: inline;に変更するだけです

0
Olofu Mark