HTML：软连字符（）没有破折号？

Question

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

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

john.doe-
@example.com

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

Answer 1

虽然我不确定这是如何跨浏览器（可能相当不错），但您总是可以使用精简空格字符（ ）或零宽度空格（{{1} }）。 ⁺⁺

​

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

Answer 2

使用零宽度空间：​

john.doe​@example.com

在此处采取行动：http://jsfiddle.net/uTXwx/1/

Answer 3

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

See it in action here

MDN documentation

Answer 4

您可能想了解一下css属性word-wrap。

而this page似乎正在做你想做的事。