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

Question

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

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

或者ckeditor可以选择阻止它吗？

Answer 1

You can use ‑这是一个非破坏性的非传统版本（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。

每当“word”包含除字母和数字之外的任何内容时，您甚至可以考虑插入nobr标记。原因是某些浏览器甚至可能会破坏“2/3”或“f（0）”等字符串（请参阅oddities of line breaking in browsers上的页面）。

Answer 4

如果不编辑每个HTML实例，则无法执行此操作。因此，我写了一些JS来替换它们：

jQuery的：

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

Vanilla JS：

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

Answer 5

在连字符周围使用单词连接符字符（⁠）。它也可以在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'));
}

Answer 6

试试这个CSS：

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