如何防止在所有浏览器中的连字符处换行

Question

我们的CMS 中有CKEditor 。 我们的最终用户将通过该 CKEditor 输入一些长文章。 我们需要一种方法来防止在这些文章的连字符处换行。

有没有办法防止所有浏览器中的连字符换行？

或者 CKEditor 是否可以选择防止这种情况发生？

Answer 1

您可以使用‑这是一个 Unicode 非中断连字符 (U+2011)。

HTML: ‑ 或‑

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

Answer 2

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

.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 代码来替换它们：

jQuery：

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

原生 JavaScript：

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

Answer 5

在连字符周围使用单词连接字符 ( ⁠ )。 它也适用于 Internet Explorer。

修复特定的连字符...

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

或者一切...

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

Answer 6

试试这个 CSS：

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