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 回答