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

Question

我们的CMS上有一个ckeditor.我们的最终用户将通过该ckeditor输入一些长篇文章.我们需要一种方法来防止这些文章上的连字符断行.

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

或者ckeditor可以选择防止这种情况吗？

Answer 1

你可以使用 ?哪种是Unicode NON-BREAKING HYPHEN(U + 2011).

HTML:‑或‑

另见:http://en.wikipedia.org/wiki/Hyphen#In_computing

Answer 2

一种解决方案可能是使用额外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

Answer 3

我担心没有比将文本拆分为"单词"(由空格分隔的非空格字符序列)并在nobr标记中包含每个包含连字符的"单词"更简单的方法.所以输入数据就像bla bla foo-bar bla bla转向bla bla <nobr>foo-bar</nobr> bla bla.

nobr每当"单词"包含除字母和数字之外的任何内容时,您甚至可以考虑插入标记.原因是某些浏览器甚至可能会破坏"2/3"或"f(0)"之类的字符串(请参阅我的页面,了解浏览器中的断线特征).

Answer 4

如果不编辑每个 HTML 实例，您就无法做到这一点。因此，我编写了一些 JavaScript 代码来替换它们：

\n

jQuery：

\n

// Replace hyphens with non-breaking ones\n$txt = $("#block-views-video-block h2");\n$txt.text( $txt.text().replace(/-/g, \'\xe2\x80\x91\') );\n

\n

普通 JavaScript：

\n

function nonBrHypens(id) {\n    var str = document.getElementById(id).innerHTML;\n    var txt = str.replace(/-/g, \'\xe2\x80\x91\');\n    document.getElementById(id).innerHTML = txt;\n}\n

\n