我有一个小的布局问题：在客户网站上，我们展示人们的联系信息在一个小框中。该框的宽度是受限制的。恰好有一些人名字很长（毕竟这在德国...），并且电子邮件地址是名字和姓氏的组合。结果是，对于某些名称，电子邮件地址超出了关于框给定的约束。
在@之前插入一个­可以得到正确的换行，但看起来像这样：
john.doe-
@example.com
有没有可能去掉那个短横线？我不想使用<br />，因为对于90%的名称来说，可用宽度已经足够了。
HTML：不带破折号的软连字符（­）是什么？
12
- Benjamin Wohlwend
1
6个回答
8
虽然我不确定这在跨浏览器方面的表现如何（可能相当好），但您可以始终使用细空格字符（ ）或零宽度空格（++。​）
john.doe @example.com
++我不建议使用零宽空格，因为一些浏览器可能无法正确地呈现它（来源）。
- user241244
16
1我很想看到一个现代浏览器，它无法正确地呈现这个。链接页面上有关于两个被跟踪的错误的信息，这两个错误都已经被解决为已修复。 - Sapph
3除非您将此电子邮件从浏览器复制并粘贴到Outlook、记事本等应用程序中，否则您会得到
john.doe?@example.com。 - joshcomley@joshcomley 我刚刚尝试了一下我帖子中的fiddle示例，没有遇到任何问题。 - Sapph
1@Shiv Kumar，在我的测试中，零宽度空格没有可见字符，但是如预期的那样，该字符确实在粘贴时转移（体验为电子邮件地址中的一个点，需要两个箭头向左或向右才能越过）。我不知道这是否会对电子邮件服务器造成问题，但我认为无论哪种方式，都是相同的问题。我不建议在纯文本复制/粘贴中使用此方法。 - user241244
2一个字符就是一个字符，无论它有多小。 :) - user241244
显示剩余11条评论
2
如果你愿意停止支持Internet Explorer 11，那么可以使用元素。这可能比使用零宽度空格更好，因为它不会被复制到剪贴板中。
在此处查看实际应用效果： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr#Example 相关文档请参考： MDN 文档
在此处查看实际应用效果： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr#Example 相关文档请参考： MDN 文档
- jlh
0
我更喜欢使用预期的<wbr>换行机会HTML元素。它本质上是U+200B零宽度空格，并且表现出与其相同的行为，因此没有连字符。
我发现在源代码中使用<wbr>比使用​更清晰明了。
john.doe<wbr>@example.com
john.doe​example.com
两者都没有连字符。
john.doe
@example.com
- user17772338
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
word-break: break-all;可能有所帮助。 - Denis