web-dev-qa-db-ja.com

非常に長い文字列をワードラップする

長い文字列、ウェブサイトのアドレス、Word、または自動改行付きのシンボルセットを表示して、div幅を維持するにはどうすればよいですか？ワードラップのようなものだと思います。通常、スペースを追加しても機能しますが、ワードラップなどのCSSソリューションはありますか？

たとえば、それは（非常に厄介な）divにオーバーラップし、水平スクロールなどを強制します。

上記の文字列に何を追加して、divの数行内またはブラウザウィンドウ内にきちんと合わせることができますか？

cssstringlong-integerword-wrap
71
Peter Craig

この質問は以前ここで尋ねられました：

短い話：

CSSソリューションに関する限り、次のことができます。overflow: scroll;は要素にスクロールバーを表示させ、overflow:hidden;は余分なテキストを切り捨てます。 text-overflow:Ellipsis;とWord-wrap: break-Word;がありますが、それらはIEのみです（break-WordはCSS3ドラフトにあります。したがって、この5の解決策になります今から数年）。

一番下の行は、次の行にテキストを折り返すことでこれを防ぐことが非常に重要な場合、唯一の合理的な解決策は、&shy;（ソフトハイフン）、 <wbr> （ワードブレークタグ）、または &#8203; （ゼロ幅スペース、&shy;マイナスハイフンと同じ効果）文字列サーバー側。ただし、Javascriptを気にしない場合は、 ハイフネーター がありますが、これはかなり堅実です。

86
Paolo Bergantino

Word-wrap: break-Word;は、IE7 +、FF 3.5、およびWebkit対応のブラウザー（Safari/Chromeなど）で使用できます。 IE6を処理するには、Word-wrap: break-all;を宣言する必要もあります

FF 2.0がブラウザマトリックスにない場合、これらを使用することは実行可能なソリューションです。あいにく、Wordが壊れる前の行をハイフネーション処理しません。これは印刷上の悪夢です。控えめなJavaScriptであるPaoloが提案するHyphenatorを使用することをお勧めします。 JavaScriptを有効にしていないユーザーのフォールバックは、ハイフンのない壊れたWordになります。とりあえずそれで生きることができます。この問題は、Webデザイナーが入力するコンテンツを制御できない、または改行とソフトハイフンを実装できるCMSで発生する可能性があります。

CSS3のハイフネーションについて説明している W3仕様 を見てきました。残念ながら、いくつかの提案があるように見えますが、具体的なものはまだありません。ブラウザベンダーはまだ何かを実装していないようです。 MozillaとWebkitの両方で所有コードを確認しましたが、兆候はありません。

31
Kevin Rapley

Word-break:break-all御treat走

25
Sam Jones

here でこれについて言及しただけですが、おそらくこの質問により関連性があります。すぐに最良のプロパティはオーバーフローラップになります。実装される場合の最良の値は次のとおりです。

* {
   overflow-wrap:hyphenate. 
}

IPhoneやFirefoxで書いている時点ではまだサポートされていないようで、overflow-wrap：hyphenateはワーキングドラフトにも含まれていません。

それまでの間、私は使用したい：

p {
    Word-wrap: break-Word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}
9
adriatiq

すべての長い文字列、URLなどを防ぐためにコードを使用します。

 -ms-Word-break: break-all;

/* Be VERY careful with this, breaks normal words wh_erever */
     Word-break: break-all;

/* Non standard for webkit */
     Word-break: break-Word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
3
Roman Losev
 display：block; 
 overflow：hidden; 
 text-overflow：Ellipsis; 
 width：200px; //またはあなたに最適なもの
3
jamiethepiper

いつかCSS3のWord-wrapプロパティにアクセスできることを願っています： Force Wrapping： 'Word-wrap' property 。

いつか...

2
Chad Birch

通常、Cellsはこれを自然に行いますが、次のようにしてdivでこの動作を強制できます。

div {
  width: 950px;
  Word-wrap: break-Word;
  display: table-cell;
}
1
nikc

常にline-heightプロパティを指定します-指定しない場合、Word-break: break-all;プロパティ。

0
Shraddha Mohite

これは最新のChromeのトリックをしているようです：

[the element],
[the element] * {
  Word-wrap: break-Word;
  white-space: pre;
}

Chrome以外のブラウザはチェックしていません。

0
SDMulroy