css - 長い単語がdivを壊すのを防ぐには?

Question

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

問題: DIV に動的テキストを入力すると、必然的に div 列の端を越えて伸びる非常に長い単語があり、サイトが専門的でないように見えます。

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

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

誰もこれに対する実行可能な解決策を持っていますか?

Answer 1

ソフトハイフン

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

averyvery­longword

としてレンダリングされる場合があります

とても長い言葉

また

averyvery-
ロングワード

適切な正規表現を使用すると、必要でない限り挿入しないようにすることができます。

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

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

<wbr>エレメント

<wbr>別のオプションは、以前のIE-ismを注入することです。これは現在HTML5 にあります。

averyvery<wbr>longword

ハイフンなしで改行:

averyvery
ロングワード

​幅ゼロのスペース文字(または)でも同じことができます&#x200B。

---

参考までに、最新の IE、Firefox、および Safari でサポートされているCSShyphens: autoもあります(ただし、現在 Chrome ではサポートされていません)。

div.breaking {
  hyphens: auto;
}

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

レトロ泣き言の解決策

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

div.breaking {
   display: table-cell;
}

---

overflow以下のwhite-space: pre-wrap回答も良いです。

Answer 2

2 つの修正:

1. overflow:scroll-- これにより、デザインを犠牲にしてコンテンツを確実に見ることができます (スクロールバーは醜いです)。
2. overflow:hidden-- オーバーフローをカットするだけです。ただし、人々はコンテンツを読むことができないことを意味します。

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

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

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

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

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

CSSoverflowプロパティの使用を開始するのは完璧ではありませんが、デザインが壊れるのを防ぎます。overflow:hidden最初に適用します。オーバーフローはパディングで壊れない可能性があるため、ネストするかdivボーダーを使用することを忘れないでください (最適なものは何でも)。

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

これを修正するには、JS を使用して元に戻し、何らかの形式の自動切り捨てを行います。私はいくつかの疑似コードを書いている途中でしたが、途中で非常に複雑になります。できるだけ多くを表示する必要がある場合は、ハイフネーターを調べてください (後述)。

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

Answer 3

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

Answer 4

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

Answer 5

それをサポートしているブラウザでは動作word-wrap: break-wordしないということですか？

stylesheet の body 定義に含まれている場合は、ドキュメント全体で機能するはずです。

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

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

Answer 6

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

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

Answer 7

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

.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に私にとってインデントを壊しました.

Answer 8

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

Answer 9

私にとって、固定サイズのない div と動的コンテンツを使用した場合、次を使用して機能しました。

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

Answer 10

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

word-wrap: break-word;

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

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

overflow: hidden;

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

Answer 11

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

たとえば、これは次のとおりです。

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

...結果は次のとおりです。

abcde­12345678901234

この問題を回避するために、正の先読みを使用するバージョンを次に示します。

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

...この結果:

abcde­12345­67890­1234

Answer 12

更新: CSS でこれを処理するのは驚くほど簡単で、オーバーヘッドは低くなりますが、ブレークが発生したときにどこでブレークが発生するかを制御することはできません。気にしない場合、またはデータに自然な区切りのない長い英数字が含まれている場合は問題ありません。多くの長いファイル パス、URL、および電話番号がありましたが、そのすべてに、他の場所よりも断ち切りやすい場所がありました。

私たちの解決策は、最初に正規表現の置換を使用して、空白または改行を好む特殊文字の 1 つ以外の 15 文字 (たとえば) の後に幅ゼロのスペース (​) を置くことでした。次に、これらの特殊文字の後にゼロ幅のスペースを配置する別の置換を行います。

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

現在使用している特殊なブレーク文字は、ピリオド、スラッシュ、バックスラッシュ、カンマ、アンダースコア、@、|、およびハイフンです。ハイフンの後の改行を奨励するために何かをする必要はないと思うかもしれませんが、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');

Answer 13

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

Answer 14

HYPHENATOR が正解です (上記)。あなたの質問の背後にある本当の問題は、Web ブラウザーがまだ (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

Answer 15

p {
    overflow-wrap: break-word;
}


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

Answer 16

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

Answer 17

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

Answer 18

これがあれば -

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

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

Answer 19

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

Answer 20

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

Answer 21

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

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