worldofjr worldofjr - 3 months ago 5x
HTML Question

Can you wrap text on an @ symbol?

Is there any way to wrap text just before or after the @ symbol in an email address? HTML or CSS, or perhaps js/jQuery are all possibilities for a solution.

I'm trying to tidy up an admin page of a website and reduce the width of some columns without losing visual data, and this is the prime candidate!


You could add an inline span tag on a character.

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


If you'd like what's before or after a particular character, you should use lookahead and lookbehinds respectively.

lookbehind: /(?<=@).+/

lookahead: /.+(?=@)/

Change the first argument of the replace() function to one of the above regex. Here is another example with a fiddle

$(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>"));

For the part after the @ symbol, just change beforeText to afterText.