HTML：软连字符 () 没有破折号？
我有一个布局问题：在客户网站上，我们在一个小框中显示人员的联系信息。该框的宽度受到限制。碰巧，有些人的名字很长（毕竟这是在德国……），而电子邮件地址是名字和姓氏的串联。结果：对于某些名称，电子邮件地址超出了“关于”框给出的限制。
在 @ 之前插入 ­ 会产生正确的换行符，但看起来像这样：
john.doe-
@example.com
是否可以抑制该破折号？我不想使用
I have a little layout problem: on a clients website, we show contact information of people in a little box. The width of that box is constrained. As it happens, there are people with very long names (this is in Germany, after all...), and the email address is a concatenation of the given name and family name. The result: with certain names, the email address overflows the constraints given by the about box.
Inserting a before the @results in the correct line break, but looks like this:
john.doe-
@example.com
Is it possible to suppress that dash? I don't want to use <br />, because for 90% of the names, the available width is more than enough.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
虽然我不确定这如何跨浏览器（可能很好），但您始终可以使用细空格字符（
或零宽度空格（< code>).++++ 我不建议使用零宽度空格，显然有些浏览器将无法正确渲染它（来源）。
Though I'm not sure how this does cross-browser (probably pretty well), you could always use the thin space character (
or the zero-width space (++).++ I would not suggest using the zero-width space, as apparently some browsers will not render it correctly (source).
使用零宽度空格：
此处的操作：http:// /jsfiddle.net/uTXwx/1/
Use a zero-width space:
In action here: http://jsfiddle.net/uTXwx/1/
如果您愿意放弃对 Internet Explorer 11 的支持，则可以使用
在此处查看实际操作
MDN 文档
If you're willing to drop support for Internet Explorer 11, then you can use the
<wbr>element. This is probably superior to using the zero-width-space, because it won't be copied into the clipboard.See it in action here
MDN documentation
您可以通过将 hyphenate-character 设置为来抑制连字符空字符串：
不会打印破折号，将复制/粘贴没有不需要的字符
You can suppress hyphens by setting hyphenate-character to an empty string:
won't print a dash, will copy/paste without unwanted characters
您可能想看看 css 属性
word-wrap。此页面似乎正在做你想做的事情。
You may want to have a look on css property
word-wrap.And this page seems to be doing what you want.
我更喜欢使用预期的
我发现在源代码中查看
更清楚。两者都不会中断连字符。
I prefer to use the intended
<wbr>line break opportunity HTML element. It's essentially the U+200B zero-width space and behaves as it does, so no hyphen.I find that it's clearer to see what
<wbr>does in the source code than using.Both break without a hypen.