ダッシュで単語を区切るにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/904

  •  08-06-2019
  •  | 
  •  

質問

比較的単純な CSS を考えると、次のようになります。

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

文字列が拘束されたままになるようにするにはどうすればよいですか? width の 150, 、ハイフンで改行に折り返すだけですか?

役に立ちましたか？

解決

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

&shy;

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

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

他のヒント

最新のすべてのブラウザで* (そして一部では 古いブラウザ, も)、 <wbr> 要素 は、長い単語を特定のポイントで区切る機会を提供するのに最適なツールです。

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

単語ブレイクの機会 (<wbr>) HTML 要素は、ブラウザがオプションで改行できるテキスト内の位置を表します。ただし、ブラウザの改行ルールではその位置で改行は作成されません。

OP の例でそれを使用する方法を次に示します (または、次の URL で実際の動作を確認してください) JSフィドル):

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

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

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

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

  • 単語分割時には機能するが、単語分割以外の時にはハイフンが表示されない、または

  • 単語壊しではなく、単語壊れたときに2つのハイフンを表示するときに、休憩中にハイフンを追加するときに2つのハイフンを表示します。

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

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

正確に見たいものに応じて、次の組み合わせを使用できます。 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 秒の間の値である可能性があります。

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

word-break:break-all;

元。

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

出力：

abababababa
ababababbba
abbabbababa
ababb

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

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

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

&#8209;

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

また、 ハイフン css プロパティは ない に設定 なし (デフォルト値は マニュアル).

<wbr> はサポートしていません インターネットエクスプローラ.

これが役立つことを願っています

使用 <br>(break) 改行したい場所にタグを付けます。

ハイフン文字の後には幅 0 のスペースを使用できます。

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

ハイフンを使用する前に改行したい場合 &#8203;- その代わり。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top