我有一个小的布局问题:在客户网站上,我们展示人们的联系信息在一个小框中。该框的宽度是受限制的。恰好有一些人名字很长(毕竟这在德国...),并且电子邮件地址是名字和姓氏的组合。结果是,对于某些名称,电子邮件地址超出了关于框给定的约束。
在@
之前插入一个­
可以得到正确的换行,但看起来像这样:
john.doe-
@example.com
有没有可能去掉那个短横线?我不想使用<br />
,因为对于90%的名称来说,可用宽度已经足够了。
我有一个小的布局问题:在客户网站上,我们展示人们的联系信息在一个小框中。该框的宽度是受限制的。恰好有一些人名字很长(毕竟这在德国...),并且电子邮件地址是名字和姓氏的组合。结果是,对于某些名称,电子邮件地址超出了关于框给定的约束。
在@
之前插入一个­
可以得到正确的换行,但看起来像这样:
john.doe-
@example.com
有没有可能去掉那个短横线?我不想使用<br />
,因为对于90%的名称来说,可用宽度已经足够了。
虽然我不确定这在跨浏览器方面的表现如何(可能相当好),但您可以始终使用细空格字符( 
)或零宽度空格(++。​
)
john.doe @example.com
++我不建议使用零宽空格,因为一些浏览器可能无法正确地呈现它(来源)。
john.doe?@example.com
。 - joshcomley我更喜欢使用预期的<wbr>
换行机会HTML元素。它本质上是U+200B零宽度空格,并且表现出与其相同的行为,因此没有连字符。
我发现在源代码中使用<wbr>
比使用​
更清晰明了。
john.doe<wbr>@example.com
john.doe​example.com
两者都没有连字符。
john.doe
@example.com
word-break: break-all;
可能有所帮助。 - Denis