html - CSS 用于特定字符的分词提示

Question

在网络应用中，经常有我在表格列中显示电子邮件地址的地方，每次有一个长电子邮件地址时，都会拉长列并弄乱表格宽度或列平衡。

我正在使用的当前解决此问题的方法是插入<wbr/>标签，以鼓励电子邮件在中点过宽时完全中断。所以一大块html就像

user<wbr/>@domain.com

将呈现为

[e-mail]

当有空间和

用户
@domain.com

没有的时候。

这是我想要的显示行为，但它是一个不令人满意的解决方案，因为当我从页面中选择并复制一封电子邮件时，嵌入的中断也被捕获，作为一个不可见的控制字符，并破坏了用于粘贴到其他字段的电子邮件地址.

似乎 CSS 中应该有一些指令，除了标准空格和连字符中断字符之外，还允许将额外字符标识为更适合于断词。

这将创建相同的包装行为，而无需通过插入标签来更改实际内容。

但我似乎找不到这样的东西。有哪些可能的解决方案？

标签： htmlcsslayoutresponsive-design

Answer 1

尝试以某种宽度截断电子邮件文本。然后在电子邮件下方添加工具提示。所以你可以复制地址而不破坏列的宽度