如何在所有浏览器上防止连字符出现换行

我们在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不间断连字符（U + 2011）。

HTML：‑或‑

另请参阅：http : //en.wikipedia.org/wiki/连字符#In_computing

一种解决方案是使用额外的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;
}

在连字符周围使用单词joiner character（⁠）。它也可以在IE中使用。

https://zh.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;