4

我对网站上的文本段落使用 CSS 连字符 ( hyphens:auto;)。有时,电子邮件地址会出现连字符,从而导致“错误”域名。例子:

john.doe@planungsteam.abc

变成

john.doe@planungs-
team.abc

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

(我认为这是一个问题,尤其是德语文本,其中有很多复合名词)

4

3 回答 3

3

CSS 中没有办法在不使它们成为元素的情况下引用部分文本(除非它们可以被称为伪元素,例如:first-letter,但目前 CSS 中只有少数伪元素,它们在这里没有帮助)。

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

于 2013-12-12T11:03:47.507 回答
1

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

a[href^="mailto:"] {
    -webkit-hyphens: none;
   -moz-hyphens: none;
    hyphens: none;
}
于 2014-01-09T09:07:09.613 回答
1

是的,如果它是用户生成的,可能最容易用正则表达式处理它,客户端还是服务器端取决于你,这是 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包装一个电子邮件地址

编辑:

尽管此正则表达式可能无法获取所有电子邮件地址

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

于 2013-12-12T11:14:27.503 回答