我使用以下代码textbox在运行时间创建用于输入电话号码。如何在电话号码之间添加连字符（-）。例如，如果我输入1234567，则该条目应显示如下123-45-67怎么做这个？如何在 JQuery 中做到这一点？

我有一个网站，我更喜欢使用 ­ ; （软连字符）按我想要的方式断词。

单击此处查看 Chrome 的屏幕截图

问题计算机运行 OS X（多个版本），并且问题出现在 Chrome 和 Safari（多个版本）中。具有完全相同操作系统和浏览器版本的计算机可以以不同的方式显示这一点。屏幕截图是在 OS 10.8 上使用 Chrome v. 21.0.1180.75 拍摄的。

它看起来像软连字符一样有效，因为它分割了单词，并插入了一个连字符“-”，但它也会生成带有十字的矩形。

该网站使用@fontface，如果这与它有任何关系的话。

谢谢！

我正在尝试在 div 中对电子邮件地址进行自动换行，否则它会溢出，因为它对于 div 的宽度来说太长了。

我知道这个问题之前已经在这里讨论过（例如这个问题），但是请继续阅读，因为我涵盖了那里和其他地方提到的所有可能的解决方案。

以下解决方案都不能完全满足我的要求：

1. CSS

   根据 div 的宽度，这会在尴尬的地方破坏电子邮件地址。例如

   info@longemailaddress.co.u

   ķ

2. 在 HTML 中使用软连字符：

   这确实得到了很好的支持，但在页面上呈现了一个可见的连字符，导致用户相信电子邮件地址中有一个连字符：

   信息@long-

   emailaddress.co.uk

3. 在电子邮件地址中使用细空间或零宽度空间：

   这两个都插入了额外的字符（如果用户复制粘贴，那就太糟糕了）

4. 换行符...

   ......因为，大多数时候，div 足够大，可以在一行中包含电子邮件地址。

我想我希望在 HTML/CSS 中有一些巧妙的方法来做到这一点，也许使用伪元素（例如：before / :after），或者使用软连字符但以某种巧妙的方式用 CSS 隐藏它。

我的网站使用 jquery，所以如果必须的话，我会求助于它，尽管我宁愿不包含一个完整的连字符库，只是为了这个小问题！

请在明信片上回答。（或者，理想情况下在这里......）

我有一个 html 片段：

它呈现为：

在 Chrome v.29 中

我期望：

软连字符有什么问题？

更新：

我的意思是：

更新 2：

我认为这是一个 SLIM 错误：我有：

现在改为：

所以.html_safe帮助。

但是如果没有 ruby​​ 代码也可以做同样的事情吗？

我使用的字体在我的书面语言中具有软连字符作为一个非常常见的字符，出于多种原因我需要使用它，但由于各种原因，我读过的 html 使它们不可见，这使得具有该字符的单词很难和难以阅读和理解（认为“路”显示为“rad”或“rod”）。无论如何，使用 html、css 或任何东西来强制在网站上显示软连字符？

几天前，我遇到了一个严重的问题，即隐藏在我的 Java 代码中的变量名和实体的列名中的软连字符。我的操作系统是 Ubuntu 14.04，查看它们的唯一方法是在 Yudit 编辑器下编辑这个文件。在 Eclipse (luna) 或 Sublime Text 3 下查看同一个文件时，即使将它们粘贴到 Skype 或任何其他 IM 上，我也看不到这个字符。（我花了一整天时间寻找那个隐藏的“-”）。但是...当 Windows 用户在 Skype 上收到我的包含软连字符文本的消息时，实际上可以看到这个该死的字符。将包含软连字符文本的 wiki 页面中的文本复制粘贴到任何文本编辑器（记事本、notepad++、Eclipse、InteliJ，甚至 Web 浏览器的地址栏...）实际上使该字符可见。

示例：（我在这里看不到“e”后面的“-”，即使将其复制并粘贴到某些文本编辑器中）：电子邮件。

先感谢您

­很棒，尤其是因为它适用于所有流行的浏览器。你把它放在一个词的中间，它告诉浏览器这个词可能在那个地方被打断了。如果它确实在那里被破坏，则会出现一个连字符。如果没有，该角色将保持隐形。

但是对于内容作者来说，使用它并不是很容易：您必须进入 HTML 来添加它。即使您可以将其添加到 CMS 中，您也无法在插入后立即看到它的位置。

所以我继续在我的 CMS 中声明了一个内联样式供我的作者使用。他们可以选择单词的一部分，例如<span class="shy">communi</span>cation，然后 css 规则会神奇地添加­using:after伪元素！并且使用一些特定于 CMS 的 CSS，我可以给该标签一个虚线下划线，以表明它有一个软连字符。适用于 Firefox 和 IE8+。整洁的。

但连字符不会出现在 Google Chrome 中！它打破了这个词，但没有破折号。我知道它不支持hyphenscss 属性，但它通常支持­.

但是好吧，所以我删除了 css 样式并编写了一些 javascript 以在加载时添加。使用 jQuery，我尝试了.append和.after. 我什至试过innerHTML += '­'。它们都不起作用！多么令人失望……

如何解决这个问题？

我发现软连字符可以通过不同的方式拆分单词，具体取决于单词包装的宽度。

JSFiddle示例清楚地表明了这一点。

前两个词（在示例中）看起来像我期望的那样，但最后两个词对我来说是个谜。有人能告诉我为什么­在单词末尾显示破折号吗？

编辑：正如 Oriol 指出的那样，不同的浏览器和环境会产生不同的视图。这是我看到的图片：

我正在寻找可能会破坏 HTML 行（例如空格）的字符和元素列表，但我无法在 Internet 上找到任何定义正常 HTML 换行行为的页面。我找到了那些：

• 可分割空间，
• 标签，
• 新队
• 零宽度空间（亚洲）
• 较少的 ”-”
• 软连字符

当然，我不希望它打破“pre”标签！

是否可以在 CSS 中使用连字符或软连字符，从而不会不必要地呈现连字符？

我的目标是尽可能保留原始文本并打破任何单词，除非绝对关键，因为它们太长而无法适应容器宽度。

我的具体情况

我想以这样的方式呈现文本“Hi Superman”：

如果“超人”这个词太长而无法放入容器中，我想以某种方式将其连字符，例如：

但是如果“超人”这个词可以放入容器中，它必须在没有连字符的情况下呈现

如果上述情况是可能的（“超人”可以写成不带连字符的），那么添加不必要的连字符是不可接受的，如下所示：

我可以随意更改 HTML。我被允许以一种有意义的方式注入连字符（只要每个连字符之间有 3 个以上的字母就可以了。“Superma-n”永远不行）

我试过的

我认为软连字符将是解决方案。所以我用：Hi Super­man

但我发现这会导致上面显示的“不必要的连字符”这种不可接受的情况。

显示失败的片段：

我可以只用 CSS 解决上面的例子吗？（尝试了不同的word-break属性但没有成功）

我的猜测是，由于 CSS 的性质，仅使用简单的 HTML 和 CSS 是不可能解决这个问题的。我假设 CSS 只是逐行解析文本，它永远无法知道一个词是否会“更适合”下一行文本。如果它找到一个连字符，它将尝试在当前文本行上匹配最大数量的字符。

我想只用 HTML 和 CSS 来解决这个问题，或者根本不用。 编辑：最好 - 不使用 javascript 进行文本解析。

- 我不想根据 div 的宽度以及我是否猜测文本是否需要连字符来为每个 div 设置不同的 CSS 属性。

- 不希望在我的话周围添加包装

- 没有自动连字符会导致像“Superma-n”这样的可笑连字符（但是在紧要关头，只要每个连字符之间有 3 个字符，我就可以使用自动自动连字符。就像“超人”）