不要拆分带连字符的单词

Question

我正在开发一个网站（Wordpress，HTML，CSS，jQuery），其中包含用葡萄牙语编写的内容。连字符有很多单词，如果它们出现在行尾，则会被分成两半。这是一个例子：

Batata frita pála-
pála, é uma tara de
sabor.

有没有办法可以检测一个单词是否连字符，如果它在行尾，则不会将其分成两半？理想的是整个单词只能进入下一行，但如果不可能，我愿意接受建议。像这样：

Batata frita
pála-pála, é uma
uma tara de sabor.

对我而言，比了解解决方案更重要的是理解它。提前谢谢。

修改

该网站是在CMS平台上开发的，内容由客户端插入并且是动态的。我不能指望客户自己使用不间断的连字符（HTML ‑）。

Answer 1

用 Non-Breaking Hyphens 替换所有连字符。它与非中断空格（ ）相同，只是它是连字符。

Answer 2

如果你在谈论浏览器自己的文本/ HTML内容包装（而不是正则表达式分割），我可以想到两种方法：

• 使用不间断连字符（HTML ‑）而不是常规连字符
• 在您不想包装的部分周围添加<span style="white-space: nowrap">

Answer 3

正如其他人所建议的那样，您需要将常规连字符替换为非连续连字符。

这可以由CMS自动完成。

对于Wordpress，您可以在主题的functions.php中添加content filter：

function non_breaking_hyphens($content){
    return str_replace('-', '‑', $content);
}

add_filter('the_content', 'non_breaking_hyphens');

这将在帖子正文中应用所需的搜索替换，然后再将其发送到浏览器。

Answer 4

有几种可能性：

<nobr>pála-pála</nobr>
<span class=nobr>pála-pála</span>
pála&#8209;pála

所有都有利有弊（见http://www.cs.tut.fi/~jkorpela/html/nobr.html）。

无论您选择哪种方法，都可以尝试自动化流程服务器端或客户端。由于这或多或少具有表现性，我认为可以通过客户端JavaScript完成。我建议采用类似于Firefox的策略：可以划分长连字符化合物（它通常可以改进格式化），但如果连字符两边有少于4个字符，则可以防止除法。

Answer 5

关于问题的更新：

我看到三种可能的解决方案，但不容易解决：）

1. 使用正则表达式解析内容，如果子字符串在>....<范围内，请使用str_replace或换入<nobr> =＆gt;容易出错和复杂
2. 使用内容构建DOMDocument，遍历DOM并使用您选择的非中断解决方案处理每个textNode。 =＆GT;服务器资源可能代价高昂
3. 客户端：我见过的所有WYSIWYG都有扩展API。添加一个插入非破坏连字符的按钮或添加用-替换‑的onKeyUp侦听器

Answer 6

如果您因为在iOS移动浏览器中检查您的网站而面临此挑战，则必须使用更强大的代码。例如，Apple iPhone将自行重排文本，但也可以使用连字符。所以，这样做是为了完全消除这个问题：

.yourclass{
    -moz-hyphens: none;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}