html - HTML：没有破折号的软连字符 ()？

Question

我有一点布局问题：在客户网站上，我们在一个小框中显示人们的联系信息。该框的宽度受到限制。碰巧，有些人的名字很长（毕竟这是在德国……），电子邮件地址是名字和姓氏的串联。结果：对于某些名称，电子邮件地址超出了 about 框给出的约束。

在正确的换行符之前插入 a ，但看起来像这样：@

john.doe-
@example.com

是否有可能压制那个破折号？我不想使用<br />，因为对于 90% 的名称，可用宽度绰绰有余。

score 7 · Accepted Answer

虽然我不确定这如何跨浏览器（可能非常好），但您始终可以使用细空格字符 (  )或零宽度空格 ( )。⁺⁺

john.doe&thinsp;@example.com

⁺⁺我不建议使用零宽度空间，因为显然某些浏览器不会正确呈现它（来源）。

score 4 · Accepted Answer

使用零宽度空间：

john.doe&#8203;@example.com

在这里行动：http: //jsfiddle.net/uTXwx/1/

score 1 · Accepted Answer

1

你可能想看看 css property word-wrap。

这个页面似乎正在做你想做的事。

于 2011-02-18T08:09:29.527 回答

score 0 · Accepted Answer

如果您愿意放弃对 Internet Explorer 11 的支持，那么您可以使用该 <wbr>元素。这可能优于使用零宽度空间，因为它不会被复制到剪贴板中。

score 0 · Accepted Answer

我更喜欢使用预期的<wbr> 换行机会 HTML 元素。它本质上是 U+200B 零宽度空间，其行为与它一样，所以没有连字符。

我发现查看<wbr>源代码中的内容比使用.

john.doe<wbr>@example.com

john.doe&#8203;example.com

两者都没有炒作。

john.doe
@example.com

5 回答 5