Html 如何防止在所有浏览器上的连字符处换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8753296/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent line break at hyphens on all browsers
提问by Alan
We have a ckeditor on our CMS. Our end users will input some long articles via that ckeditor. We need a way to prevent line break at hyphens on those articles.
我们的 CMS 上有一个 ckeditor。我们的最终用户将通过该 ckeditor 输入一些长文章。我们需要一种方法来防止在这些文章的连字符处换行。
Is there anyway to prevent line break at hyphens on all browsers?
无论如何要防止所有浏览器上的连字符换行？
or does ckeditor have an option to prevent that?
或者 ckeditor 是否可以选择阻止这种情况？
采纳答案by Jukka K. Korpela
I'm afraid there's no simpler way to do it reliably than splitting the text to “words” (sequences of non-whitespace characters separated by whitespace) and wrapping each “word” that contains a hyphen inside nobrmarkup. So input data like bla bla foo-bar bla blawould be turned to bla bla <nobr>foo-bar</nobr> bla bla.
恐怕没有比将文本拆分为“单词”（由空格分隔的非空白字符序列）并在nobr标记内包装每个包含连字符的“单词”更可靠的方法了。所以输入数据bla bla foo-bar bla bla会变成bla bla <nobr>foo-bar</nobr> bla bla.
You might even consider inserting nobrmarkup whenever the “word” contains anything but letters and digits. The reason is that some browsers may even break strings like “2/3” or “f(0)” (see my page on oddities of line breaking in browsers).
您甚至可以考虑nobr在“单词”包含字母和数字以外的任何内容时插入标记。原因是某些浏览器甚至可能会中断诸如“2/3”或“f(0)”之类的字符串（请参阅我关于浏览器中换行的奇怪之处的页面）。
回答by deceze
You can use?which is a Unicode NON-BREAKING HYPHEN (U+2011).
您可以使用?which 是 Unicode Non-BREAKING HYPHEN (U+2011)。
HTML: ‑or ‑
HTML:‑或‑
回答by derekerdmann
One solution could be to use an extra spantag and the white-spaceCSS property. Just define a class like this:
一种解决方案可能是使用额外的span标签和white-spaceCSS 属性。只需定义一个这样的类：
.nowrap {
white-space: nowrap;
}
And then add a span with that class around your hyphenated text.
然后在带连字符的文本周围添加一个包含该类的跨度。
<p>This is the <span class="nowrap">anti-inflammable</span> model</p>
This approach should work just fine in all browsers - the buggy implementations listed here are for other values of the white-spaceproperty: http://reference.sitepoint.com/css/white-space#compatibilitysection
这种方法应该适用于所有浏览器 - 此处列出的错误实现适用于该white-space属性的其他值：http: //reference.sitepoint.com/css/white-space#compatibilitysection
回答by Chris Happy
You unable to do it without editing every HTML instance. Consequently, I wrote some JS to replace them:
如果不编辑每个 HTML 实例，您就无法做到这一点。因此，我写了一些 JS 来代替它们：
jQuery:
jQuery：
//replace hypens with no-breaking ones
$txt = $("#block-views-video-block h2");
$txt.text( $txt.text().replace(/-/g, '?') );
Vanilla JS:
香草JS：
function nonBrHypens(id) {
var str = document.getElementById(id).innerHTML;
var txt = str.replace(/-/g, '?');
document.getElementById(id).innerHTML = txt;
}
回答by Carter Medlin
Use the word joinercharacter (⁠) around the hyphen. It works in IE as well.
在连字符周围使用单词连接字符 ( ⁠)。它也适用于 IE。
https://en.wikipedia.org/wiki/Word_joiner
https://en.wikipedia.org/wiki/Word_joiner
fix specific hyphens...
修复特定的连字符...
function fixicecream(text) {
return text.replace(/ice-cream/g,'ice⁠-⁠cream'));
}
or everything...
或一切...
function fixhyphens(text) {
return text.replace(/(\S+)-(\S+)/g,'⁠-⁠'));
}
回答by Ma Yubo
Try this CSS:
试试这个 CSS：
word-break: break-all;
-webkit-hyphens:none;
-moz-hyphens: none;
hyphens: none;
