如何防止所有浏览器上的连字符换行

我们的CMS上有一个ckeditor。 我们的最终用户将通过该ckeditorinput一些长篇文章。 我们需要一种方法来防止在这些文章的连字符处换行。

无论如何，要防止在所有浏览器的连字符换行？

或ckeditor有一个选项，以防止这一点？

Answer 1

恐怕没有比将文本分割成“单词”（用空格分隔的非空白字符序列）和在nobr标记内包含连字符的每个“单词”更可靠的方法。 所以像bla bla foo-bar bla bla这样的input数据将会被转换成bla bla <nobr>foo-bar</nobr> bla bla 。

您甚至可以考虑在“单词”包含字母和数字之外的任何地方插入nobr标记。 原因是一些浏览器甚至可能会打破“2/3”或“f（0）”这样的string。

Answer 2

你可以使用 ‑这是一个统一编码非破坏联合国（U + 2011）。

HTML： ‑ 或者‑

另请参阅： http : //en.wikipedia.org/wiki/Hyphen#In_computing

Answer 3

一个解决scheme可能是使用额外的span标签和white-space CSS属性。 只要定义一个这样的类：

 .nowrap { white-space: nowrap; } 

然后在你的连字符文本周围添加一个span。

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

这种方法在所有的浏览器中都可以正常工作 – 这里列出的bug是针对white-space属性的其他值： http : //reference.sitepoint.com/css/white-space#compatibilitysection

Answer 4

尝试这个

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

Answer 5

如果不编辑每个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; }