すべてのブラウザでハイフンでの改行を防ぐ方法

CMSにckeditorがあります。私たちのエンドユーザーはそのckeditorを介していくつかの長い記事を入力します。それらの記事のハイフンでの改行を防ぐ方法が必要です。

とにかく、すべてのブラウザでハイフンでの改行を防ぐ方法はありますか？

またはckeditorはそれを防ぐオプションがありますか？

テキストを「単語」（空白で区切られた空白以外の文字のシーケンス）に分割し、nobrマークアップ内にハイフンを含む各「単語」をラップするよりも簡単に信頼できる方法はありません。したがって、のような入力データbla bla foo-bar bla blaはになりますbla bla <nobr>foo-bar</nobr> bla bla。

nobr「単語」に文字と数字以外のものが含まれている場合は、マークアップを挿入することを検討することもできます。その理由は、一部のブラウザーは「2/3」や「f（0）」などの文字列を分割することさえあるためです（ブラウザーでの改行の奇妙さについての私のページを参照してください）。

使用できるの ‑は、Unicode NON-BREAKING HYPHEN（U + 2011）です。

HTML：‑または‑

こちらもご覧ください：http : //en.wikipedia.org/wiki/Hyphen#In_computing

1つの解決策は、追加のspanタグとwhite-spaceCSSプロパティを使用することです。このようなクラスを定義するだけです：

.nowrap {
    white-space: nowrap;
}

そして、ハイフネーションされたテキストの周りにそのクラスのスパンを追加します。

<p>This is the <span class="nowrap">anti-inflammable</span> model</p>

このアプローチは、すべてのブラウザで問題なく機能するはずです。ここにリストされているバグのある実装は、white-spaceプロパティの他の値用です：http : //reference.sitepoint.com/css/white-space#compatibilitysection

すべてのHTMLインスタンスを編集せずにそれを行うことはできません。その結果、私はそれらを置き換えるためにいくつかのJSを書きました：

jQuery：

//replace hypens with no-breaking ones
$txt = $("#block-views-video-block h2");
$txt.text( $txt.text().replace(/-/g, '‑') );

バニラJS：

function nonBrHypens(id) {
    var str = document.getElementById(id).innerHTML; 
    var txt = str.replace(/-/g, '‑');
    document.getElementById(id).innerHTML = txt;
}

使用する単語建具の文字（⁠ハイフンを中心に）。IEでも動作します。

https://en.wikipedia.org/wiki/Word_joiner

特定のハイフンを修正...

function fixicecream(text) {
    return text.replace(/ice-cream/g,'ice⁠-⁠cream'));
}

またはすべて...

function fixhyphens(text) {
    return text.replace(/(\S+)-(\S+)/g,'$1⁠-⁠$2'));
}

このCSSを試してください：

word-break: break-all; 
-webkit-hyphens:none;
-moz-hyphens: none; 
hyphens: none;