4 に答える
単語間の改行を禁止する場所を示すには、単語間に NO-BREAK SPACE または ' ` を使用します。通常のスペースは破壊可能です。だからあなたは例えば書くことができます
Hello, my name is foo.
許可された改行を示したい場合は (以下のコメントに従って)、nobr要素内 (非標準ですが、魅力のように機能します) または設定した任意の要素内でテキストをラップするwhite-space: nowrapことができます。または許可されます。次に、<wbr>タグ (非標準ですが...) または文字参照​または​(ice ZERO WIDTH SPACE の場合)をスペースの後に使用して、改行を許可します。
<nobr>Hello, <wbr>my name <wbr>is foo.</nobr>
<wbr>と ZERO WIDTH SPACEのどちらを選択するかは、主に IE の奇妙さによるトリッキーな問題です。
タグを使用できます<wbr>。
編集:コメントで述べたように、幅ゼロのスペースを使用できます:(​参照: nbsp の反対は何ですか? )
それを行うためのネイティブな方法はないと思いますが、この種のことが本当に必要なときにいつでも使用しているハックを次に示します。
var str = "Hello,<br>My name is foo.";
str = str.replace(/ /g, ' ').replace(/<br>/g, ' ');
基本的に、改行したくない単語を区切るには改行しないスペースを使用します。
ここで動作を確認してください: http://jsfiddle.net/5xmt6/ (ウィンドウのサイズを変更して、ウィンドウがどのように反応するかを確認してください)。
注:これは非常にハックであり、独自の問題を引き起こします。つまり、ビューポートが非常に狭くなると、残りのテキストは折り返されません。
のスパンを使用して、テキストをグループに分割しますinline-block。
https://jsfiddle.net/mindplay/7aeyp3hs/
@media非常に小さなデバイスでは、テキストが通常どおり流れるようにテキストが流れるだけのルールを使用して、この効果をオフにしていることに注意してください。