ハイフンの後の改行なし

340

ハイフンの後の改行を、-すべてのブラウザーと互換性のあるケースバイケースで防止したいと考えています。

例：

私はこのテキストを持っています： 3-3/8"これはHTMLでこれです： 3-3/8”

問題は、行の終わり近くで、ハイフンが原因で、完全な単語のように扱うのではなく、改行して次の行に折り返されることです...

3-
3/8"

「ゼロ幅ノーブレイク文字」を挿入しようとしましたが、運がありません...

3-&#65279;3/8&rdquo;

私はこれを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" />

ハイフンの後の改行を防ぐ方法はありますか？ページ全体に当てはまる解決策は必要ありません...機能するものを除いて、「ゼロ幅の改行なし文字」のように、必要に応じて挿入できるものだけです。

こちらがデモです。ハイフンで改行するまで枠を狭くしてください。

http://jsfiddle.net/RagKH/

— きらきら
ソース

すでに答えとして掲載されています@EricLeschinski、： stackoverflow.com/a/12362315/594235

— スパーキー

charset = utf-8を使用すると、‑非改行ハイフンを入力できます

— QuentinUK

@QuentinUK、そう...それはすでに受け入れられた答えではないですか？ ‑改行しないハイフンです。

— Sparky

＆＃8209; 通常のASCIIなので、utf-8は不要です。ページのutf-8エンコーディングを使用すると、実際の文字を入れることができます。‑は-と同じ文字ではありませんが、同じように見えます。

— QuentinUK、2018

あなたが書いたものの正しいHTMLは、3-3/8″またはになり3-3/8″ます。引用は素数ではありません。純粋なASCIIでそれが必要な場合は、代わりにストレート二重引用符を使用してください（"）。できれば、読みやすく読みやすいテキストとして33/8</style>″表示する場合は、代わりにを使用して「3⅜」を表示する

— Canned Man

579

改行しないハイフンを使用してみてください‑。私は、ダッシュをjsfiddleのその文字に置き換え、フレームを可能な限り小さく縮小しましたが、行はそれ以上分割されません。

— CanSpice
ソース

10

改行しないスペースのようなものだと思ったので、「改行しないダッシュ」を検索して、ここで終了しました。:-)

— CanSpice、2011年

ああ...私は「ノーブレイクキャラクター」検索を行い、それで壁にぶつかりました。壊れないスタンドアロンのハイフン文字があることは、私には思いもよらないことでした。

— Sparky

6

IE8 / 9では、この文字は通常のハイフンよりも長くレンダリングされます。エンダッシュと同じサイズのようです。

— mrtsherman

21

結果が通常のハイフンと異なる可能性があるのは、多くのフォントに改行しないハイフンが含まれていないためです。これにより、ブラウザは別のフォントを使用する必要があり、改行しないハイフンはそのフォントの通常のハイフンと同じように見えますが、別のフォントの通常のハイフンと一致する保証はありません。

— Jukka K. Korpela

5

デブの答えは最高だと思います。

— Ray Cheng

256

関連するテキストを次のようにラップすることもできます

<span style="white-space: nowrap;"></span>

— Deb
ソース

17

はい、これは受け入れられたものよりも良い答えです。@Debに感謝します。

— CMH 2013

38

@CMHこれは、空白（ユーザーに空白が見える空白の場所-何も表示されない場所）をラップする場合には役立ちませんが、単語「e-mail」などのハイフンで単語を分割する必要はありません。この場合、承認された回答が役立ちます

— xmojmr 2014年

12

その場合、「電子メール」の周りでのみスパンを使用できます。

— guirto 2014年

3

@CMH、これはうまくいく良い答えなので、私はそれに賛成票を投じました。ただし、次の行に自動的に分割しない文字を要求したので、この回答を受け入れないことにしました。一部のブラウザでは、「改行しないハイフン」（‑）が通常のハイフンよりも少し長く表示される場合があるという事実は、私にとってはささいなことでした。

— Sparky

11

@Sparkyさまざまな文字の使用に関する1つの問題は、検索結果がめちゃくちゃになることです。ページで「3-3 / 8」を検索しようとしても、改行しないハイフンは見つかりません。

— リスター氏、2015

23

IE8 / 9は、CanSpiceの回答で言及されている改行しないハイフンを通常のハイフンよりも長く表示します。これは、一般的なハイフンではなく、en-dashの長さです。この表示の違いは私にとって取引のブレーカーでした。

Debが指定したCSS回答を使用できなかったため、代わりに改行タグを使用しないことにしました。

<nobr>e-mail</nobr>

さらに、IE8 / 9がハイフンで壊れる特定のシナリオを見つけました。

文字列には、改行しないスペースで区切られた単語が含まれています-  
幅が限られている
ダッシュが含まれています

IEはこのようにレンダリングします。

IE8 / 9でのハイフン分割の例

次のコードは、上記の問題を再現します。IE10で問題が修正されたため、IE9に強制的にレンダリングするためにメタタグを使用する必要がありました。メタタグをサポートしていないため、いじくり回しません。

<!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&nbsp;there&nbsp;is&nbsp;a&nbsp;-&nbsp;and&nbsp;words&nbsp;are&nbsp;separated&nbsp;by&nbsp;the&nbsp;whitespace&nbsp;code&nbsp;&amp;nbsp;&nbsp;then&nbsp;IE&nbsp;will&nbsp;wrap&nbsp;on&nbsp;the&nbsp;dash.</p>
        </div>
    </body>
</html>

— Mrtsherman
ソース

6

を使用するのnobrは最もブラウザに依存しない方法であり、フォントやCSSとは関係なく機能します。nobr要素は、HTMLの仕様で定義されていないが、これは唯一の形式とみなされるべきです。ただし、HTML仕様で記述する必要がある場合は、CSSを使用したDebの回答が最適です。

— Jukka K.Korpela

5

CSSソリューションを使用できなかった理由を知りたいです。

— ライアンアハーン2013

2

@RyanAhearn-HTMLをあまり制御できないサードパーティのツールを使用しています。インラインタグ宣言はサポートしていません。

— mrtsherman 2013

「」の代わりに、クラスでスパンを使用し、CSSを使用してそれを制御しただけではありませんか？

— StephenESC 2015年

1

nobrタグは非標準であり、いつでも壊れる可能性があることに注意してください。MDNのドキュメントでは、このタグの使用を推奨していません：developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

— Philipp

16

「U+2060ワードジョイナー」を挿入して「ジョイナーウェイ」にすることもできます。

Accept-Charset許可されている場合は、Unicode文字自体をHTML出力に直接挿入できます。

それ以外の場合は、エンティティエンコーディングを使用して行うことができます。たとえば、テキストを結合するにはred-brown、以下を使用します。

red-&#x2060;brown

または（10進数で同等）：

red-&#8288;brown

。もう1つの使用可能な文字は「U+FEFFゼロ幅ノーブレークスペース」です。^{^[⁠⁠1]}：

red-&#xfeff;brown

および（10進数で同等）：

red-&#65279;brown

^{[1]：この方法は Chromeなどの主要なブラウザでも機能しますが、が、Unicode 3.2以降非推奨います。}

「joiner way」と「U+2011Non-breaking Hyphen」の比較：

ジョイナーという単語は、ハイフンだけでなく、他のすべての文字に使用できます。
ジョイナーという単語を使用する場合、ほとんどのレンダラーはテキストを同じようにラスタライズします。Chrome、FireFox、IE、Operaでは、通常のハイフンのレンダリング：

abcdefghijklmnopqrstu-vwxyz

通常のハイフンのレンダリングと同じです（U + 2060ワードジョイナーを使用）。例：

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

上記の2つのレンダリングは、「Non-breaking Hyphen」のレンダリングとは異なります。例：

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

。（違いの程度はブラウザ依存とフォント依存です。たとえば、「arial」のフォント宣言を使用すると、FirefoxとIE11は比較的大きなバリエーションを示しますが、ChromeとOperaは小さなバリエーションを示します。）

「ジョイナーウェイ」と（CSS .c1 {white-space:nowrap;}）および：

ジョイナーという単語は、HTMLタグの使用が制限されている状況、たとえばWebサイトやフォーラムのフォームに使用できます。
上のプレゼンテーションとコンテンツのスペクトル、大半はタグと比較すると、コンテンツに近づくように単語の建具を検討します。

^{•以下を使用してWindows 8.1コア64ビットでテスト済み：

    •IE 11.0.9600.18205

    •Firefox 43.0.4

    •Chrome 48.0.2564.109（公式ビルド）m（32ビット）

    •Opera 35.0.2066.92}

— パチェリエ
ソース

「U + FEFFゼロ幅ノーブレークスペース」がIE11で正しく機能しないようです。

— Ivan Gusev 2016

「-」の後にユニコード文字が続く場合、「U + 2060」は機能しないようです。このようにbingo-⁠bongo

— Ivan Gusev

絶え間ない否定的な報道にもかかわらず

— JamesWilson 2017

6

パーティーには遅れますが、これが実際には最もエレガントだと思います。WORD JOINER Unicode文字を使用＆＃8288 ; ハイフン、emダッシュ、または任意の文字のいずれかの側。

だから、そうです：

&#8288;—&#8288;

これにより、両端のシンボルが隣接する（スペースを追加せずに）結合され、改行が防止されます。

— エクシュタイン
ソース

私は、Windows 10上でいくつかの理由でALT + 0173（ソフトハイフン）を使用して、仕事にこれを取得することができました

— pspahn