Question

我对网站上的文字段落使用CSS连字符（hyphens:auto;）。有时会发生电子邮件地址被连字符导致“错误”的域名。例如：

john.doe@planungsteam.abc

成为

john.doe@planungs-
team.abc

我如何防止这种行为？由于这是用户生成的内容，因此无法手动添加html元素。我正在考虑使用javascript解析文本，在电子邮件地址中添加特殊标记，并在这些标记上使用hyphens:none;。但我担心表现。

（我认为这是一个问题，尤其是德语文本，其中有很多复合名词）

Answer 1

CSS中没有办法在不将它们作为元素的情况下引用文本的部分（除非它们可以称为伪元素，如:first-letter，但CSS中只有一些伪元素，他们在这里没有帮助。）

因此，您需要以编程方式处理内容，无论是服务器端还是客户端。识别电子邮件地址是非常重要的，您也可以考虑处理其他一些结构（例如，URL）。出于性能原因，您可以在客户端JavaScript中执行此操作，以便仅在文档加载后才开始处理。或者，如果数据以HTML格式保存在服务器上，则可以在保存数据之前执行处理（尽管这会增加要发送到浏览器的数据量）。

Answer 2

是的，如果它是用户生成的，可能最容易用正则表达式处理它，那么客户端或服务器端是由您自己决定的，这是javascript中的一个简单实现。

var unprocessed = $('#user-output').html();
processed = unprocessed.replace(/([a-z]+\[-@-\][a-z]+\.[a-z]+)/g,'<span class="email">$1</span>');
$('#user-output').html(processed);

jquery wrap a e-mail address

编辑：

虽然this regex may not pick up ALL email addresses

并且，这会破坏电子邮件链接，例如<a href="mailto:support@example.com">

Answer 3

如果您将电子邮件地址包含在标签中，事情就会变得容易多了。我正在使用wordpress插件检测电子邮件地址并将其转换为受垃圾邮件保护的电子邮件链接。之后，很容易在css中添加它：

a[href^="mailto:"] {
    -webkit-hyphens: none;
   -moz-hyphens: none;
    hyphens: none;
}

如何防止电子邮件地址的css自动连字

3 个答案: