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

Question

長い文字列、Web サイトのアドレス、単語、または一連の記号を自動改行で表示して、div の幅を維持するにはどうすればよいですか? 一種のワードラップだと思います。通常、スペースを追加すると機能しますが、ワードラップなどの CSS ソリューションはありますか?

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

上記の文字列に何を追加すれば、div またはブラウザーウィンドウ内の数行に収まるようにできますか?

score 87 · Accepted Answer

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

簡単に言えば：

CSS ソリューションに関する限りoverflow: scroll;、要素にスクロールバーを表示overflow:hidden;させ、余分なテキストを切り取るだけです。ありますがtext-overflow:ellipsis;、word-wrap: break-word;それらは IE のみです (break-wordただし、は CSS3 ドラフトに含まれているため、5 年後にはこれが解決される予定です)。

要するに、テキストを次の行に折り返すことでこれが起こらないようにすることが非常に重要な場合、唯一の合理的な解決策は、 (ソフトハイフン)、<wbr>(単語区切りタグ)、または(ゼロ幅スペース、マイナスハイフンと同じ効果) を文字列サーバー側で使用します。ただし、Javascript を気にしない場合は、かなりしっかりしているように見えるハイフネータがあります。

score 11 · Accepted Answer

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

* {
   overflow-wrap:hyphenate. 
}

iPhoneまたはFirefoxでの執筆時点ではまだサポートされていないようであり、overflow-wrap:hyphenateはワーキングドラフトにもありません。

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

p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}

score 3 · Accepted Answer

表示ブロック;
オーバーフロー: 非表示;
テキストオーバーフロー: 省略記号;
幅: 200px; // またはあなたに最適なものは何でも

score 3 · Accepted Answer

すべての長い文字列、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;

score 2 · Accepted Answer

いつかword-wrap、CSS3: Force Wrapping: the 'word-wrap' property のプロパティにアクセスできるようになることを願っています。

いつか...

score 1 · Accepted Answer

通常、セルはこれを自然に行いますが、div でこの動作を強制することができます:

div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}

score 0 · Accepted Answer

line-height プロパティは必ず指定してください。指定しないと、word-break: break-all;プロパティが失敗する可能性があります。

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

10 に答える 10

Related

Reference