不要分割连字符词

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 ‑）。

- Cthulhu

Answer 1

用不间断连字符替换所有连字符。它与不间断空格（ ）相同，只是一个连字符。

- Madara's Ghost

---

很遗憾，内容是客户的责任，我不能指望他们这样做。不过还是谢谢你的回答。 - Cthulhu

PHP知道如何做到这一点。对吧？ - Itay Moav -Malimovka

@Cthulhu: 你可以使用 PHP 的 str_replace() 函数来为他们默默地完成。 - Madara's Ghost

@Cthulhu - 正确的连字符是内容的一部分，所以这是他们的责任；使用断字或不断字连字符的选择将因单词而异。如果客户想确保所有的 á 字符都正确，他们也不会期望您来修正他们的拼写错误，对吧？但是，如果必要，PHP可以进行替换。 - Spudley

@Spudley：我认为在这种情况下的一般方法是：如果单词本身包含连字符（pre-order），则不应该断开它，普通连字符（不在单词内; Sitename - Some title）应该被断开，在这种情况下，空格将正常地断开它。所以我想我们在这里是安全的。 - Madara's Ghost

Answer 2

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

• 使用非断开连字符（HTML ‑）代替常规连字符
• 在您不希望换行的部分周围添加<span style="white-space: nowrap">

- wrschneider

---

注意：white-space: nowrap;也会防止空格换行。因此，span标签只能放在一个连字符单词周围。 - pixelistik

Answer 3

正如其他人所建议的那样，您需要用不间断连字符替换常规连字符。

这可以通过CMS自动完成。

对于WordPress，您可以在主题的functions.php中添加内容过滤器：

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

add_filter('the_content', 'non_breaking_hyphens');

在将文章正文发送到浏览器之前，这将对所需的搜索替换进行应用。

- pixelistik

Answer 4

如果您面临这个挑战，是因为您正在iOS手机浏览器中检查您的网站，那么您必须采用更加强有力的代码。例如，苹果iPhone会重新排列文本，并根据自己的标准添加连字符。因此，为了完全消除这个问题，请执行以下操作：

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

- L X

Answer 5

有几种可能性：

<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个字符，则阻止分割。

- Jukka K. Korpela

---

这是一个很好的资源，我之前不知道<nobr>。然而，“两侧少于4个字符”的策略并不是一个好的选择，因为葡萄牙语可以有相当长（或短）的连字符词。 - Cthulhu

@Cthulhu，重点在于如果你有“xy-supercalifragilistic”或“supercalifragilistic-xy”，那么在连字符后面断开并不能很好地帮助格式化。但是，如果连字符化合物的任一部分长度为4个或更长，例如“supercalifragilistic-expialidocious”，那么断开可能有助于避免行长度过度变化。限制值不必为4；可以是3、5或更多。 - Jukka K. Korpela

Answer 6

关于问题的更新：

我看到了三种可能的解决方案，但没有一种是简单的 :)

1. 使用正则表达式解析内容，如果子字符串在 >....< 中，则使用 str_replace 或包装在 <nobr> 中 => 容易出错且复杂
2. 使用内容构建 DOMDocument，遍历 DOM 并使用您选择的不换行解决方案处理每个 textNode。 => 可能会消耗服务器资源
3. 客户端：我见过的大多数所见即所得编辑器都具有扩展 API。可以添加一个插入不换行连字符的按钮，或者添加一个 onKeyUp 监听器，将 - 替换为 ‑

- cypherabe