ハイフンの後に改行がない
私はハイフン-の後の改行をケースバイケースで防ぐようにしています。これはすべてのブラウザと互換性があります。
例：
私はこのテキストを持っています：3-3/8"これはHTMLでこれです：3-3/8”
問題は、行末近くで、ハイフンのために、完全なWordのように扱うのではなく、改行して次の行に折り返すことです。
3-
3/8"
「幅がない、改行しない文字」、を挿入してみました。
3-3/8”
私はSafariでこれを見て、それがすべてのブラウザで同じになると思います。
以下は私のdoctypeと文字エンコーディングです...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
ハイフンの後で改行を防ぐことができる方法はありますか？私はページ全体に当てはまる解決策を必要としません。
これがデモです。行がハイフンで途切れるまで単にフレームを狭くします。
改行しないハイフン‑を使ってみてください。私はあなたのjsfiddleでダッシュをその文字に置き換えました、それが行くことができるのと同じくらい小さくフレームを縮小してください、そしてラインはもうそこで分割しません。
関連するテキストを次のようにラップすることもできます。
<span style="white-space: nowrap;"></span>
IE8/9はCanSpiceの答えで言及されている改行のないハイフンを典型的なハイフンより長くレンダリングします。典型的なハイフンではなく、ダッシュの長さです。この表示の違いは、私にとって取引の妨げになりました。
私はDebが指定したCSSの答えを使うことができなかったので、代わりにbreakタグを使わないことにしました。
<nobr>e-mail</nobr>
さらに、IE8/9がハイフンで中断するような特定のシナリオを見つけました。
- 文字列には、改行なしのスペースで区切られた単語が含まれます -
- 幅が限られている
- ダッシュが入っています
IEはこのようにレンダリングします。
次のコードは上記の問題を再現しています。 IE10では問題が修正されているので、IE 9へのレンダリングを強制するためにメタタグを使用する必要がありました。メタタグをサポートしていないため、いじる必要はありません。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta charset="utf-8"/>
<style>
body { padding: 20px; }
div { width: 300px; border: 1px solid gray; }
</style>
</head>
<body>
<div>
<p>If there is a - and words are separated by the whitespace code &nbsp; then IE will wrap on the dash.</p>
</div>
</body>
</html>
「 U+2060 Word Joiner 」を挿入して、「結合方法」でも実行できます。
Accept-Charset が許可する場合、Unicode文字自体をHTML出力に直接挿入することができます。
それ以外の場合は、エンティティエンコーディングを使用して実行できます。例えば。テキストred-brownを結合するには、次のようにします。
red-⁠brown
または（10進数相当）：
red-⁠brown
。もう1つの使用可能な文字は "U+FEFFゼロ幅無制限スペース"です[1]：
red-brown
と（10進数に相当）：
red-brown
[1]：このメソッドstillはChromeのような主要なブラウザで動作しますが、持っています nicode 3.2から廃止予定 。
" U+2011非改行ハイフン "と "結合方法"の比較：
Word結合子は、ハイフンだけでなく、他のすべての文字に使用できます。
Word結合ツールを使用する場合、ほとんどのレンダラーはテキストを同じようにラスタライズします。 Chrome、FireFox、IE、およびOperaでは、通常のハイフンのレンダリング。
a-b-c-d-e-f-g-h-i-j-k-l-m-n-o-p-q-r-s-t-u-v-w-x-y-z
これは通常のハイフン（U + 2060 Word Joinerを使用）のレンダリングと同じです。例えば：
a-b-c-d-e-f-g-h-i-j-k-l-m-n-p-q- r-s-t-u-v-w-x-y-z
上記の2つのレンダリングは、 "Non-breaking Hyphen"のレンダリングとは異なります。例えば、
あなたは、自分のことを考えているのではないでしょうか。 z
。 （違いの程度はブラウザとフォントによって異なります。たとえば、フォント宣言が "
arial"の場合、FirefoxとIE11では比較的大きなバリエーションが表示されますが、ChromeとOperaでは小さなバリエーションが表示されます。）
「結合方法」と<span class=c1></span>（CSS .c1 {white-space:nowrap;}）および<nobr></nobr>との比較：
Word結合子は、HTMLタグの使用が制限されている状況で使用できます。 Webサイトやフォーラムの形式。
表示とコンテンツの範囲 では、タグと比較した場合、大多数はWordの結合語句をコンテンツに近いものと見なします。
•Windows 8.1 Core 64ビットでテストされた場合：
•IE 11.0.9600.18205
•Firefox 43.0.4
•Chrome 48.0.2564.109（オフィシャルビルド）m（32ビット）
•オペラ35.0.2066.92
パーティーに遅刻しますが、これは実際に最もエレガントだと思います。 Word JOINER Unicode文字を使用してください ＆＃8288 ;ハイフン、ダッシュ、または任意の文字の両側に.
だから、こんな感じ：
⁠—⁠
これは両端のシンボルを（スペースを追加せずに）その隣のシンボルに結合し、改行を防ぎます。