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

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

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

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

Alan asked 2019-09-11T00:13:37Z
5个解决方案
219 votes

您可以使用‑这是一个Unicode非破坏性的HYPHEN(U + 2011)。

HTML:‑‑

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

deceze answered 2019-09-11T00:14:35Z
71 votes

一种解决方案可能是使用额外的white-space标记和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]

derekerdmann answered 2019-09-11T00:15:13Z
42 votes

我担心没有比将文本拆分为“单词”(由空格分隔的非空白字符序列)和在nobr标记内包含每个包含连字符的“单词”更简单的方法。 因此,输入数据如bla bla foo-bar bla bla将转为bla bla <nobr>foo-bar</nobr> bla bla

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

Jukka K. Korpela answered 2019-09-11T00:13:58Z
2 votes

如果不编辑每个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;
}
Chris Happy answered 2019-09-11T00:15:49Z
-1 votes

试试这个CSS:

word-break: break-all; 
-webkit-hyphens:none;
-moz-hyphens: none; 
hyphens: none;
Ma Yubo answered 2019-09-11T00:16:14Z
translate from https://stackoverflow.com:/questions/8753296/how-to-prevent-line-break-at-hyphens-on-all-browsers