Question

有没有办法在电子邮件地址中的@符号之前或之后包装文本？ HTML或CSS，或者js / jQuery都是解决方案的可能性。

我试图整理网站的管理页面并减少某些列的宽度而不会丢失可视数据，这是最佳候选者！

Answer 1

您可以在角色上添加内嵌span标记。

$("p").html($("p").text().replace('@', '<span class="after">@</span>'));

小提琴：http://jsfiddle.net/21jqbtv9/5/

如果您喜欢特定字符之前或之后的内容，则应分别使用lookahead和lookbehinds。

lookbehind：/（？＆lt; = @）。+ /

lookahead：/。+（？= @）/

将replace()函数的第一个参数更改为上述正则表达式之一。这是另一个小提琴的例子

$(document).ready(function() {
    var email = $("p").html();
    var emailParts = email.split('@');
    var beforeText = emailParts[0];
    var afterText = emailParts[2];
   $("p").html($("p").html().replace(beforeText, "<span class='after'>" + beforeText + "</span>"));
});

http://jsfiddle.net/jL5kL72q/

对于@符号后面的部分，只需将beforeText更改为afterText。

Answer 2

另一种选择是使用HTML编码的

根据this answer，它会产生与我要建议的<wbr>标记相同的结果（直到j08691指出在IE中不起作用）。

因此，您可以将电子邮件地址设置为......

email&#x200b;@example.com

以下是您可以通过代码段运行的角色示例...

<div>
quickbrownfoxjumpsoverthelazydogquickbrownfoxjumpsoverthelazydog&#x200b;quickbrownfoxjumpsoverthelazydogquickbrownfoxjumpsoverthelazydog
</div>

你能在@符号上包装文字吗？

2 个答案: