78

比較的単純な CSS の場合:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>

width 文字列が150に制限されたままになり、ハイフンで新しい行に折り返されるようにするにはどうすればよいですか?

4

11 に答える 11

75

ハイフンを次のように置き換えます。

&shy;

これは「ソフト」ハイフンと呼ばれます。

div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

于 2008-08-04T00:25:11.227 に答える
34

すべての最新のブラウザー* (および一部の古いブラウザーでも) では、<wbr>要素は特定のポイントで長い単語を分割する機会を提供するための完璧なツールです。

そのリンクから引用するには：

Word Break Opportunity ( <wbr>) HTML 要素は、ブラウザーがオプションで改行できるテキスト内の位置を表します。

OPの例で使用する方法は次のとおりです（またはJSFiddleで実際に動作しているのを確認してください）：

<div style="width: 150px;">
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

* IE9、IE10、最新バージョンの Chrome、Firefox、Opera、および Safari でテストしました。

div {
  width: 150px;
}
<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

于 2012-01-30T06:53:13.320 に答える
18

CSS3 の一部として、これはまだ完全にはサポートされていませんが、ワードラップに関する情報はここで見つけることができます。もう 1 つのオプションは、wbr タグ、­、および ​ です。どちらも完全にサポートされていません。

于 2008-08-04T00:25:28.403 に答える
8

この特定のインスタンス（文字列にハイフンが含まれる場合）では、テキストをこのサーバー側に変換します。

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>

于 2008-12-05T12:36:27.603 に答える
8

あなたの例は、Google Chrome、Safari (Windows)、および IE8 で期待どおりに動作します。Firefox 3 および Opera 9.5 では、テキストが 150px のボックスからはみ出します。

さらに&shy;、次のいずれかになるため、この例では機能しません。

  • 単語区切りの場合は機能するが、単語区切りでない場合はハイフンを表示しない、または

  • 単語区切りではない場合は機能しますが、区切りにハイフンを追加するため、単語区切りの場合は 2 つのハイフンを表示します。

于 2008-09-15T23:15:35.183 に答える
7

正確に見たいものに応じてhyphen、 、soft hyphen、および/または を組み合わせて使用​​できますzero width space。

ソフト ハイフンでは、ブラウザーはワード ブレイク (ハイフンの追加) を行うことができます。幅ゼロのスペースでは、ブラウザーは (何も追加せずに) 単語を分割できます。

したがって、コードが次のような場合:

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

次に、ブラウザは単語区切りなしでこれを表示します。

1111112222222-33333334444444-5555555

そして、これは可能なすべてのワードブレークになります：

111111-
222222-
-333333
444444-
555555

必要なオプションを選択するだけです。あなたの場合、それは 4 と 5 の間のものかもしれません。

于 2010-09-16T09:04:10.070 に答える
2

次のものも使用できます。

word-break:break-all;

元。

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

出力：

abababababa
ababababbba
abbabbababa
ababb

word-break は、指定された幅または高さのフィートでない文にスペースがない場合でも、すべての単語または行を分割します。そのためには、幅または高さを指定する必要があります。

于 2015-08-27T12:40:39.950 に答える
0

非改行ハイフンはうまく機能します。

HTML エンティティ (10 進数) 

&#8209;
于 2014-03-21T22:09:57.093 に答える
0

代わりにまたは-を使用できます。&hyphen;\u2010

また、ハイフンcss プロパティがnoneに設定されていないことを確認してください(デフォルト値はmanualです)。

<wbr>Internet Explorer ではサポートされていません。

于 2015-05-14T04:29:27.450 に答える